Question

我试图添加＆＃34;禁用＆＃34;当选中所有复选框并且没有选中任何复选框时，将类放到我的按钮上。

能够弄清楚什么时候都没有检查：

var SummaryCheckBox = function() {
    $(':checkbox').click(function () {
        $('.btn-primary').toggleClass('disabled', !$(':checkbox:checked').length);
    });
}

但是检查所有复选框时很难检查。建议？

Answer 1

$(":checkbox").change(function(){
    var a = $(":checkbox");
    if(a.length == a.filter(":checked").length){
        alert('all checked');
    }

      if(!a.length == a.filter(":checked").length){
        alert('all unchecked');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>

Answer 2

git clone -b date-axis-item https://github.com/3rdcycle/pyqtgraph.git

您也可以在复选框中添加一些课程

Answer 3

如果选中所有复选框，则会删除类disabled，如果只选中了一个复选框，则会添加它：

var SummaryCheckBox = function() {
    $(':checkbox').click(function () {
        $('.btn-primary').toggleClass('disabled', !($(':checkbox:checked').length === $(':checkbox').length));
    });
}

Answer 4

添加额外条件以比较长度，

$(':checkbox:checked').length === $(':checkbox').length
//         ^Checked length              ^Total Length

var SummaryCheckBox = function() {
    $(':checkbox').click(function () {
        $('.btn-primary').toggleClass('disabled', $(':checkbox:checked').length === $(':checkbox').length || !$(':checkbox:checked').length);
    });
}

此外，在函数内部绑定单击处理程序并不是一个好主意。有什么具体的原因吗？将.click(..)移到函数外部。

<强> Fiddle

Fiddle2 在函数外部使用点击处理程序

Answer 5

试试这段代码：

$(':checkbox').click(function () {
    $('.btn-primary').toggleClass('disabled',  !$(':checkbox:checked').length === $(":checkbox").length);
});

您需要检查选中的复选框是否与复选框的总数相同，然后您可以将disabled类添加到按钮。

Demo

Answer 6

function allChecked() {
    return $('input[type=checkbox]').not(':checked').length == 0;
}

您可以检查它是返回true还是false，切换所需的类。

jsfiddle DEMO

Answer 7

  $('[type="checkbox"]').on('change', function(){    
    var l = $('[type="checkbox"]:checked').length;    
    if(l === 4 || l === 0){
         $('[type="submit"]').attr('disabled', '');
    } else {        
        $('[type="submit"]').removeAttr('disabled');
    }    
  });

为简单起见，数字4（复选框的数量）是硬编码的 Fiddle

Answer 8

我的两分钱将是example code，它具有更大的代码库，但也尝试更通用和自我记录......

(function (global, $) {

    var
        Array      = global.Array,

        array_from = (
            ((typeof Array.from == "function") && Array.from)
         || (function (array_prototype_slice) {
                return function (list) {
                    return array_prototype_slice.call(list);
                };
            }(Array.prototype.slice))
        ),

        isCheckboxControl = function (elm) {
            return !!(elm && (elm.type == "checkbox"));
        },
        isControlChecked = function (elm) {
            return !!(elm && elm.checked);
        },

        validateSubmitState = function (evt) {
            var
                elmForm = evt.currentTarget.form,
                $btnPrimary = $(elmForm).find(".btn-primary"),

                checkboxList = array_from(elmForm.elements)
                    .filter(isCheckboxControl),

                isEveryCheckboxChecked = checkboxList
                    .every(isControlChecked),

                isSomeCheckboxChecked = checkboxList
                    .some(isControlChecked)
            ;
            if (isEveryCheckboxChecked || !isSomeCheckboxChecked) {
                $btnPrimary.attr("disabled", "");
            } else {
                $btnPrimary.removeAttr("disabled");
            }
        },
        initializeSubmitBehavior = function () {
            var
                $btnPrimary = $(".btn-primary")
            ;
            $btnPrimary               // register validation.
                .closest("form")
                .on("click", ":checkbox", validateSubmitState)
            ;
            // force initial validation.
            $btnPrimary.toArray().forEach(function (elmButton) {
                var
                    elmCheckbox = $(elmButton.form).find(":checkbox")[0]
                ;
                if (elmCheckbox) {    // initial validation by fake event.
                    validateSubmitState({currentTarget:elmCheckbox});
                }
                // just trying not to break this examples form.
                elmButton.form.action = global.location.href;
            });
        }
    ;

    initializeSubmitBehavior();

}(window, jQuery));

在选中所有复选框时添加课程

8 个答案:

Demo