I would like to disable a form submit button until 4 checkboxes are checked. I created a quick jsfiddle to represent my code that is not working as expected.

Here is my JS:

$(function() {
  $("#question1, #question2, #question3, #question4").change(function() {
    if( $("#question1").checked && $("#question2").checked && $("#question3").checked &&       $("#question4").checked ) {
      $('.next_button').disabled = false; 
    }
    else {
      $('.next_button').disabled = true;
    }
  });
});

And the HTML:

<input id="question1" name="question1" type="checkbox" value="1">
<input id="question2" name="question2" type="checkbox" value="1">
<input id="question3" name="question3" type="checkbox" value="1">
<input id="question4" name="question4" type="checkbox" value="1">
<input class="next_button" name="mit" type="submit" value="Next" disabled="">

I am missing something simple here. Appreciate any thoughts!

I would like to disable a form submit button until 4 checkboxes are checked. I created a quick jsfiddle to represent my code that is not working as expected.

Here is my JS:

$(function() {
  $("#question1, #question2, #question3, #question4").change(function() {
    if( $("#question1").checked && $("#question2").checked && $("#question3").checked &&       $("#question4").checked ) {
      $('.next_button').disabled = false; 
    }
    else {
      $('.next_button').disabled = true;
    }
  });
});

And the HTML:

<input id="question1" name="question1" type="checkbox" value="1">
<input id="question2" name="question2" type="checkbox" value="1">
<input id="question3" name="question3" type="checkbox" value="1">
<input id="question4" name="question4" type="checkbox" value="1">
<input class="next_button" name="mit" type="submit" value="Next" disabled="">

I am missing something simple here. Appreciate any thoughts!

• javascript
• jquery
• forms
• checkbox

• Hm..would you mind explaining the down vote. – user1493570 Commented May 20, 2014 at 6:35

9 Answers 9

Two issues here.

First, .checked is a Javascript attribute so using it on jQuery object wouldn't work. You will need to use jQuery's .is(':checked') call instead.

Second, on the JSFiddle you posted, you were using jQuery version 1.4.4, which didn't have .prop() support for the disabled attribute, thus you will need to use the attr() function to toggle the disabled state, instead.

See the updated function below:

$(function () {
    $("#question1, #question2, #question3, #question4").change(function () {
        if ($("#question1").is(':checked') && 
            $("#question2").is(':checked') && 
            $("#question3").is(':checked') && 
            $("#question4").is(':checked') ) {
            $('.next_button').attr('disabled', false);
        } else {
            $('.next_button').attr('disabled', true);
        }
    });

});

Working code at: JSFiddle

Try this

$(function() {
   $("#question1, #question2, #question3, #question4").on( 'change', function() {

         $('button.next_button').prop( 'disabled', $(':checkbox:checked').length === 4);

   });
});

You have used old jQuery version 1.4 in Fiddle demo, so new function will not work properly please try this way..

  $(function() {
        $("input[type=checkbox]").bind("click", function(e){
            if($("input[type=checkbox]").serializeArray().length == 
$("input[type=checkbox]").length){
               $(".next_button").removeAttr('disabled');
            }else{
                $(".next_button").attr('disabled', "disabled");
            }

        })
    });

FIDDLE DEMO

I would preferred single selector e.g. class, element type instead of repeated ids of all elements

Instead of $('.next_button').disabled = false;, try using $('.next_button').prop("disabled", false); - likewise for setting it true. Some properties are removed, not set to false, so using the prop syntax will handle this for you.

Use this function

$(function() {
$("#question1, #question2, #question3, #question4").change(function() {

if( $('#question1').attr('checked') && $('#question2').attr('checked') &&    $('#question3').attr('checked') && $('#question4').attr('checked') ) {
     $('.next_button').removeAttr('disabled');
}
else {
    $('.next_button').attr('disabled','disabled');

}
});


});

Here is the fiddle link http://jsfiddle/CPFns/51/

I have updated your fiddle

Here is what I have changed in your code:

$(function() {  $("#question1, #question2, #question3, #question4").change(function() {

if( $("#question1").attr('checked') && $("#question2").attr('checked') && $("#question3").attr('checked') && $("#question4").attr('checked') ) {
  $('.next_button').attr("disabled",false); 
}
else {
  $('.next_button').attr("disabled",true);     }  });});

Thanks

try this

$(function() {
    $('input[type="checkbox"]').change(function(){
        if($('input[type="checkbox"]:checked').length >= 4){
            $('.next_button').removeAttr('disabled');
        }
        else{
            $('.next_button').attr('disabled', 'disabled');
        }
    });
});

Use

$(function() {
   $(':checkbox').on( 'change', function() {
      if( $(':checkbox:checked').length === 4 ) {
         $('input.next_button').prop( 'disabled', false );
      } else {
         $('input.next_button').prop( 'disabled', true );
      }
   });
});

JS FIDDLE DEMO

You may try this:

$(function () {
    $("input[name^=question]").change(function (e){
        e.stopPropagation();
        var toDisabled = (4 !== $("input[name^=question]:checked").length);
        $(".next_button").prop('disabled', toDisabled);
    });
});

DEMO