引导步骤禁用下一步按钮，并且在转到另一步之前，每一步都需要一个复选框(3步)

Question

我被困在一个简单的长表单使用Bootstrap，Javascript和CSS。我的表单来了，但我在步骤3- 4- 5有一个问题，我禁用了步骤3下一个按钮，除非出现一个复选框。转到步骤4，我需要相同的，没有下一个，直到至少一个Checkbos被选中。你好！在步骤4中，下一步按钮不会被禁用。HTML：

 ....       

这是我的JS：

    <script>
    //Require at least One Checkbox in each Section 
    $(document).ready(function OneBox() 
        {
            //Step-3
            $("#step-3").on("change", "input", function(e)
              {
                status3=($("#step-3").find("input:checked").length==0)?"disabled":"";
                $('button').prop('disabled', status3);      
                });

            //Step-4

            $("#step-4").on("change", "input", function(e)
              {

                status=($("#step-4").find("input:checked").length==0)?"disabled":"";
                $('button').prop('disabled', status4);      
                });
            $("#step-5").on("change", "input", function(e)
              {

                status=($("#step-5").find("input:checked").length==0)?"disabled":"";
                $('button').prop('disabled', status5);      
                });
        }); 
        // End Require 
     </script>

我不确定我错在哪里。好了！感谢大家的帮助。

埃德-

Answer 1

您在步骤4和5中使用了错误的变量名称:您将输入的选中状态保存到名为status的变量中，但在启用按钮时尝试使用名为status4和status5的变量。

编辑:另一个小错误(也是一个容易犯的错误)是，当为一个步骤启用按钮时，您启用了所有按钮(find('button'))，而不仅仅是当前步骤的按钮。我已经更新了下面的代码，只启用了一个按钮。

尝试以下代码：

<script>
//Require at least One Checkbox in each Step
$(document).ready(function OneBox() {
  //Step-3
  $("#step-3").on("change", "input", function(e) {
    var status3 = ($("#step-3").find("input:checked").length == 0) ? "disabled" : "";
    $("#step-3").find('button').prop('disabled', status3);
  });

  //Step-4
  $("#step-4").on("change", "input", function(e) {
    var status4 = ($("#step-4").find("input:checked").length == 0) ? "disabled" : "";
    $("#step-4").find('button').prop('disabled', status4);
  });

  //Step-5
  $("#step-5").on("change", "input", function(e) {
    var status5 = ($("#step-5").find("input:checked").length == 0) ? "disabled" : "";
    $("#step-5").find('button').prop('disabled', status5);
  });
});
// End Require
</script>

最后一点注意事项:使用您当前的代码，没有必要在步骤3、4和5的每个部分选中一个复选框。只选中一个复选框或单选框后，“下一步”按钮将被启用。