需要点击事件在其他期间触发警报

Question

所以，这段代码正在运行：

<script>
$(document).ready(function(){
  var btn = $('#submit_send_order');
  btn.attr({disabled: 'disabled'});
  var chk = $('.end-box');
  chk.click(function(){
    if ($(this).attr('checked'))
      btn.removeAttr('disabled');
    else
      btn.attr({disabled:'disabled'});
  });
});
</script>

但我无法获得任何工作版本的单击、单击或事件处理程序，以在 else 条件期间导致弹出消息。除非用户选中一个框，否则他们无法在我的网站上发送订单。现在他们点击按钮，在他们选中该框之前什么都没有发生。但我也想显示一个警报，例如：

$(document).ready(function(){
  $('#submit_send_order').click(function(){
    alert("You cannot proceed until you check the end box");
  });
});

Answer 1

正如上面 Verhaeren 所说，如果按钮被禁用，那么它就不能触发 click 事件。我不会禁用按钮，而是在 click 事件中添加一个 if/else 检查。

所以...

$(document).on('click', '#submit_send_order', function(event) {
    event.preventDefault();

    if ($('.end-box').prop('checked')) {
        //Handle form submission
    } else {
        alert('You cannot proceed until you check the end box');
    }
});

Answer 2

当元素被禁用时，onclick 事件不会触发。另外，请注意查看复选框是否被选中的正确方法：

$(document).ready(function(){
  var btn = $('#submit_send_order');
  btn.attr({disabled: 'disabled'});
  var chk = $('.end-box');
  chk.on('click', function(){
      if ($(this).is(':checked'))
      btn.removeAttr('disabled');
    else
      btn.attr({disabled:'disabled'});
  });
    btn.on('click', function(){
    alert("You cannot proceed until you check the end box");
  });
});

---

如果您真的想这样做，我会为此构建一个“解决方案”。你可以在这个小提琴上检查它：

http://jsfiddle.net/2f1wsb8c/3/

当按钮被禁用时，它会在其上放置一个与按钮大小相同的元素以捕捉点击。