jQuery foreach复选框

Question

i have jquery for disable buttons if check box checked then button enabled

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

there is many checkbox but this code work only for first check box only !

Answer 1

there is many checkbox but this code work only for first check box only !

IDs must be unique. . You should class instead.

Example of using class selector

$('.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

Try use only 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

Use this:

$(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> should probably be a class ( .disabler ) rather than id, since you said you have many of them.

Answer 4

Try this:

         $("#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

if you have more than one disabler in you page, firstly you should use class attribute instead of ID , then easily do this:

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

ID attribute is used as a unique identifier.

check this working DEMO ;

Answer 6

I agree, you are already using jQuery, so use it.

However, and in addition, you are calling the jQuery object far too many times. If you are parsing through to get the jQuery object more than once, then you should create local variables.

Second, you might consider using the power of closures for things like this:

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