javascript - Disabling submit button until multiple checkboxes are checked - Stack Overflow

admin管理员组

文章数量:1330871

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

Share Improve this question Follow edited May 20, 2014 at 4:52 joker 99099 silver badges2323 bronze badges asked May 20, 2014 at 4:48 user1493570user1493570 12711 silver badge1010 bronze badges 1

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

Add a ment  | 

9 Answers 9

Sorted by: Reset to default 2

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

本文标签： javascriptDisabling submit button until multiple checkboxes are checkedStack Overflow