logo标签列表

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

javascriptjqueryformscheckbox
3

我希望在四个复选框都被选中之前禁用表单提交按钮。我创建了一个快速的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="">

我在这里缺少一些简单的东西。感谢任何想法！
嗯...您介意解释一下为什么要点踩吗？ - user1493570
9个回答
2

这里有两个问题。

首先，.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

1

试试这个

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

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

   });
});
非常棒的答案，如果我从不同的角度看待这个令人困惑/难以理解的问题，解决方案实际上是很简单的。 - Tegra Detra
1
您在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");
            }

        })
    });

演示代码

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

0

使用

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

的内容与编程有关。
谢谢。我在jsfiddle上尝试了这个代码，但似乎不起作用——即使我勾选了所有4个复选框，“下一个”按钮仍然保持禁用状态。 - user1493570
现在已经更新了，请查看一下。它可以正常工作了。我之前使用了button.next_button而不是input.next_button。我的错误！ - PeterKA
0
请使用此函数。
$(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');

}
});


});

这里是 JSFiddle 链接 http://jsfiddle.net/CPFns/51/

0

我已经更新了你的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);     }  });});

谢谢

0
尝试这个
$(function() {
    $('input[type="checkbox"]').change(function(){
        if($('input[type="checkbox"]:checked').length >= 4){
            $('.next_button').removeAttr('disabled');
        }
        else{
            $('.next_button').attr('disabled', 'disabled');
        }
    });
});
0
你可以尝试这个：
$(function () {
    $("input[name^=question]").change(function (e){
        e.stopPropagation();
        var toDisabled = (4 !== $("input[name^=question]:checked").length);
        $(".next_button").prop('disabled', toDisabled);
    });
});

演示

0

尝试使用$('.next_button').prop("disabled", false);代替$('.next_button').disabled = false; - 同样设置为true。有些属性被删除，而不是设置为false，因此使用prop语法可以为您处理这些情况。

谢谢。在jsfiddle中尝试了这个，但似乎不起作用-在我勾选所有4个复选框之后，“下一个”按钮仍然保持禁用状态。 - user1493570
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接