首页 文章

复选框禁用启用

提问于
浏览
1

我目前有一个jQuery函数,如果取消选中Parent Checkbox,则禁用Checkboxlist,并在选中它时启用 . 但是,“父”复选框默认为取消选中,这是我想要的 .

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

有人知道修复吗?

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

2 回答

  • 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);
    });
    

    EDIT

    刚刚注意到您似乎使用了同名的多个ID,这是无效的HTML,请确保使用类 . 我在代码中发表评论,看看上面 .

  • 4

    绑定后立即触发点击处理程序:

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

相关问题