Enable button a checkbox is checked with jquery.load

Question

The code below works fine when the checkboxes are within the page itself. When the content in question is loaded from a jquery .load it doesn't register the checkboxes.

The html code below is displays within <div id='output'></div>. It works fine when I move it outside that div.

JS

$(document).ready(function() {
    $('#dropdown').change( function() {
        $('#output').load('/process.php',{dropdown: $(this).val()});
    });

    $(".checkbox").click(function(){
        $('#continue').prop('disabled',$('input.checkbox:checked').length == 0);
    });
});

HTML for process.php

<input type="checkbox" class="checkbox">

Jay Blanchard · Accepted Answer · 2012-12-21 19:38:03Z

4

You have to use the on() method to account for elements added to the DOM through AJAX. Try changing this -

$(".checkbox").click(function(){
    $('#continue').prop('disabled',$('input.checkbox:checked').length == 0);
});

To this -

 $('body').on('click', '.checkbox', function(){
     $('#continue').prop('disabled',$('input.checkbox:checked').length == 0);
 });

http://api.jquery.com/on/

answered Dec 21, 2012 at 19:38

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sdot257 Over a year ago

Works perfectly, then I tested it by clicking the cancel button. Which is <button type="reset" class="btn">Cancel</button>. When I click it, the continue button doesn't reset to a disable state (the checkbox is uncheck).

Jay Blanchard Over a year ago

You didn't include any information about a cancel button in your original post so I didn't cover it.

kei · Accepted Answer · 2012-12-21 19:36:52Z

3

Try changing your checkbox handler to

$("body").on("click", ".checkbox", function(){
    $('#continue').prop('disabled',$('input.checkbox:checked').length == 0);
});

answered Dec 21, 2012 at 19:36

kei

20.5k2 gold badges38 silver badges64 bronze badges

Comments

bukart · Accepted Answer · 2012-12-21 19:36:55Z

3

maybe you should try it via live binding

$(document).ready(function() {
    ...

    $(document).on( 'click', '.checkbox', function(){
        $('#continue').prop('disabled',$('input.checkbox:checked').length == 0);
    });
});

this way allows you to listen to events also an object that are declared after the event binding was done.

answered Dec 21, 2012 at 19:36

bukart

4,9162 gold badges23 silver badges40 bronze badges

Collectives™ on Stack Overflow

Enable button a checkbox is checked with jquery.load

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related