jquery foreach for checkbox

Question

我有禁用按钮的jquery 如果选中复选框，则启用按钮

document.getElementById('disabler').onchange = function() {   
                        if ($(disabler).is( ":checked" ) ){
                            $("#signin_submit").prop('disabled', false);
                            $("#signin_submit").css( 'cursor', 'pointer' );
                        }  else { 
                        $("#signin_submit").prop('disabled', true);
                        $("#signin_submit").css( 'cursor', 'not-allowed' );
                        }
                    }
                     });

有很多复选框，但此代码仅适用于第一个复选框！

Answer 1

有很多复选框，但此代码仅适用于第一个复选框！

ID必须是唯一的。。你应该上课。

使用类选择器的示例

$('.disabler').change(function () {
    if ($(this).is(":checked")) {
        $("#signin_submit").prop('disabled', false).css('cursor', 'pointer');
    } else {
        $("#signin_submit").prop('disabled', true).css('cursor', 'not-allowed');
    }
});

Answer 2

尝试仅使用jQuery：

$('#disabler').change(function() {
    if ($(this).is(":checked")) {
        $("#signin_submit").prop('disabled', false).css('cursor', 'pointer');
    }  else { 
        $("#signin_submit").prop('disabled', true).css('cursor', 'not-allowed');
    }
});

Answer 3

使用此：

$(document).on("change", "<selector for disablers>", function() {   
    if (this.checked) {
        $("#signin_submit").prop('disabled', false);
        $("#signin_submit").css('cursor', 'pointer');
    } else { 
        $("#signin_submit").prop('disabled', true);
        $("#signin_submit").css('cursor', 'not-allowed');
    }
});

<selector for disablers>应该是一个类（.disabler）而不是id，因为你说你有很多。

Answer 4

试试这个：

         $("#disabler").change(function(){ 
                    if ($("#disabler").is( ":checked" ) ){
                        $("#signin_submit").prop('disabled', false);
                        $("#signin_submit").css( 'cursor', 'pointer' );
                    }  
                  else { 
                        $("#signin_submit").prop('disabled', true);
                        $("#signin_submit").css( 'cursor', 'not-allowed' );
                   }
         });

Answer 5

如果您的页面中有多个disabler，则首先应使用class属性而不是ID，然后轻松执行此操作：

$(document).on("change", ".disabler", function(){
    //your stuff
});

ID属性用作unique标识符。

检查此工作DEMO;

Answer 6

我同意，您已经在使用jQuery，所以请使用它。

但是，此外，您调用jQuery对象的次数太多了。如果您要解析以多次获取jQuery对象，那么您应该创建局部变量。

其次，您可以考虑使用闭包的功能：

function wireDisabler() {
    // closures
    var $cbxDisabler = $('#disabler');
    var $btnSubmit = $("#signin_submit");
    var fOnChange = function() {
        var bChecked = $cbxDisabler.is(':checked');
        $btnSubmit.prop('disabled', !bChecked)
            .css('cursor', (bChecked ? 'pointer' : 'not-allowed'));
    };
    // handle event
    $cbxDisabler.change(fOnChange);
}