禁用提交按鈕，直到選中多個復選框

Question

我想禁用表單提交按鈕，直到選中4個復選框。 我創建了一個快速的jsfiddle來表示我的代碼沒有按預期工作。

這是我的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;
    }
  });
});

和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="commit" type="submit" value="Next" disabled="">

我在這里缺少一些簡單的東西。 感謝任何想法！

Answer 1

這里有兩個問題。

首先， .checked是一個Javascript屬性，因此在jQuery對象上使用它是行不通的。 您將需要使用jQuery的.is(':checked')調用。

其次，在您發布的JSFiddle上，您使用的是jQuery版本1.4.4，它沒有.prop()支持disabled屬性，因此您需要使用attr()函數來切換disabled狀態，而不是。

請參閱下面的更新功能：

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

});

工作代碼： JSFiddle

Answer 2

試試這個

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

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

   });
});

Answer 3

而不是$('.next_button').disabled = false; ，嘗試使用$('.next_button').prop("disabled", false); - 同樣是為了設置它。 某些屬性已刪除，未設置為false，因此使用prop語法將為您處理此問題。

Answer 4

使用

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

Answer 5

使用此功能

$(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');

}
});


});

這是小提琴鏈接http://jsfiddle.net/CPFns/51/

Answer 6

我已經更新了你的小提琴

以下是我在代碼中更改的內容：

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

謝謝

Answer 7

試試這個

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

Answer 8

你可以試試這個：

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

DEMO

Answer 9

您在Fiddle演示中使用了舊的jQuery 1.4版，因此新功能將無法正常工作請嘗試這種方式..

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

我更喜歡單選擇器，例如類，元素類型而不是所有元素的重復ID