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">

Answer 1

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/