复选框禁用启用

Question

我目前有一个jQuery函数，禁用复选框列表，如果父复选框未选中，并启用它时检查。但是，父复选框默认为取消选中，我想要。

这会导致代码出现问题，因为它在页面加载时启用，并且仅在您选中并取消选中父复选框时才会禁用。

任何人都知道一个修复？

$(document).ready(function() { 
    $('#cbsys').bind('click', function() { 
     var doEnable = ($('#cbsys:checked').length > 0); 
     $('#syscbl').each(function() { 
      if (doEnable) { 
       $(this).attr('disabled', null); 
       $(this).parents('label').removeClass('cssDisabled'); 
      } else { 
       $(this).attr('disabled', 'disabled'); 
       $(this).parents('label').addClass('cssDisabled'); 
      } 
     }); 
    }); 
}); 

Answer 1

只是缓存它作为一个功能和文件准备以及对点击运行它。我还优化你的代码位：

function disableCk() { 
    var doEnable = $('#cbsys:checked').length; // <-- use a class 
    $('#syscbl').each(function() { // <-- use a class 
    var $this = $(this); 
    if (doEnable) { 
     $this.prop('disabled', false) 
     .parents('label') 
     .removeClass('cssDisabled'); 
    } 
    else { 
     $this.prop('disabled', true) 
     .parents('label') 
     .addClass('cssDisabled'); 
    } 
    }); 
} 

$(document).ready(function() { 
    disableCk(); 
    $('#cbsys').on('click', disableCk); 
}); 

编辑

只注意到你似乎可以用多个ID与无效HTML相同的名称，请务必使用类来代替。我在代码中发表评论，看看上面的内容。

Answer 2

只是触发你的点击处理程序绑定后立即：

$('#cbsys').bind('click', function() { 
    var doEnable = ($('#cbsys:checked').length > 0); 
    $('#syscbl').each(function() { 
    if (doEnable) { 
     $(this).attr('disabled', null); 
     $(this).parents('label').removeClass('cssDisabled'); 
    } 
    else { 
     $(this).attr('disabled', 'disabled'); 
     $(this).parents('label').addClass('cssDisabled'); 
    } 
}).trigger('click').trigger('click');