Question

如果没有选中任何复选框，我有以下jquery代码禁用按钮。否则，该按钮是可按下的。

以下是jquery代码：

$(function() {
 var checkboxes = $(':checkbox').click(function(event) {
 $('#group-edit-submit').prop("disabled", checkboxes.filter(':checked').length === 0);
 });

}）;

因此，当未选中任何复选框时，它会一直禁用#group-edit-submit按钮。以下是按钮标记：

<div id="group-edit-submit-wrapper">
   <input disabled id="group-edit-submit" type="submit" name="submit" value="Edit selected members" >
</div>

以下是复选框标记：

<div>
   <input id="checkbox1" type="checkbox">
</div>
<div>
   </input id="checkbox2" type="checkbox">
</div>

在这种情况下工作正常。该按钮最初被禁用。单击其中一个复选框时，该按钮已启用。

但是，当活动删除其中一个复选框以便标记变为：

时

<div>
   <input id="checkbox1" type="checkbox">
</div>

在这种情况下，即使选中了复选框，也会永久禁用该按钮，除非页面被重新加载。由于某些原因，当标签发生变化时，脚本无法检测到现有的复选框。

如何在不重新加载页面的情况下修复脚本？可能吗？有什么想法吗？

问候

补充评论：

大家好，事实证明，当整个div被jquery html函数替换时，没有检测到复选框选择器。

考虑我从tbh借用的以下HTML代码：

<div id="group-edit-submit-wrapper">
  <input disabled id="group-edit-submit" type="submit" name="submit" value="Edit selected members" >
</div>
<div id="some_container">
  <div>
    <input id="checkbox1" type="checkbox">
  </div>
  <div id="cbHolder">
    <input id="checkbox2" type="checkbox">
  </div>
</div>
<input class="toggle" type="button" value="Toggle Checkbox">

问题中的元素位于#some_container div中。所以，它有以下javascript切换元素。当它命中时，整个#some_container将被jquery html（）函数替换：

$(function() {
   var checkboxes = $('input:checkbox').on('click',
     function(event) {
        $('#group-edit-submit').prop("disabled",checkboxes.filter(':checked').length === 0);
      });

     var toggle= true;
     $('.toggle').on('click',function(){
       toggle = !toggle;
       if(toggle){
         $('#some_container').html('<div><input id="checkbox1" type="checkbox"></div><div id="cbHolder"><input id="checkbox2" type="checkbox"></div>');
       }else {
         $('#cbHolder').remove();
     }
  });
});

无论我们如何编写“禁用复选框”功能，问题都会始终存在。知道如何解决这个问题吗？

Answer 1

编辑：在OP的新评论之后，此更改将修复它：

function SetupCheckboxClick() {
     $('input:checkbox').on('click', function(event) {
        $('#group-edit-submit').prop("disabled",$('input:checkbox').filter(':checked').length === 0);
      });
}
$(function() {
     SetupCheckboxClick();

     var toggle= true;
     $('.toggle').on('click',function(){
       toggle = !toggle;
       if(toggle){
         $('#some_container').html('<div><input id="checkbox1" type="checkbox"></div><div id="cbHolder"><input id="checkbox2" type="checkbox"></div>');
         SetupCheckboxClick();
       }else {
         $('#cbHolder').remove();
     }
  });
});

Answer 2

http://jsbin.com/hisata/1/edit

此链接是否按预期方式执行？

更改选择器并使用.on允许

 var checkboxes = $('input:checkbox').on('click',
   function(event) {
 $('#group-edit-submit').prop("disabled",   checkboxes.filter(':checked').length === 0);
 });

修改

var checkboxes = $('#parentElement input:checkbox').on('click'...

删除并添加html元素时，Jquery代码停止工作

问候

2 个答案: