Javascript 需要单击事件以在else期间触发警报

因此，该代码正在运行：

<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>

---

当元素被禁用时，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");
  });
});

---

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

---

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

正如Verhaeren上面所说的，如果按钮被禁用，则无法触发点击事件。我不会禁用按钮，而是在click事件中加入if/else检查

所以

---

将代码中的

attr

的所有实例替换为

prop

。您的示例是有效的，但是当我在我的站点上实现代码时，我在div上没有得到单击响应，即使选中该框，我也无法单击提交按钮。下面是按钮的实际HTML：

@JacobIRR您在那里更改了很多内容。请注意，在我的小提琴风格应用于按钮：位置：相对；顶部：-20px；z指数：1。现在您还可以将类型更改为“image”。然后，当按钮被禁用时，您必须更改捕捉单击并显示在按钮（现在是图像）上的div的样式。原理很简单：当元素被禁用时，将其放置在可单击输入上以显示警报消息，当可单击按钮被启用时，隐藏该元素。

$(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");
  });
});

$(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');
    }
});