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支持，因此您需要使用{{1用于切换attr()状态的函数。

请参阅下面的更新功能：

disabled

工作代码：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); - 同样将其设置为true。某些属性已删除，未设置为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

我已更新您的fiddle

以下是我在代码中更改的内容：

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

我更喜欢单选择器，例如class，元素类型而不是所有元素的重复id

禁用提交按钮，直到选中多个复选框

9 个答案:

DEMO