javascript - 如何禁用下面的按钮，直到以上所有部分至少单击一个

Question

我的代码:

<div class="tables">
<form>
<table class="table table-bordered">
<thead>
      <tr>
    <th class="thheader">Monday</th>
    <th class="thheader">Tuesday</th>
    <th class="thheader">Wednesday</th>
    <th class="thheader">Thursday</th>
    <th class="thheader">Friday</th>
    </tr>
    </thead>
    <tr>
      <td>

      </td>
      <td>
      <center>
      <input type="checkbox" class="colour-button" value="10 - 12" id="btn1012" /><label for="btn1012">10am - 12pm</label>
        <input type="checkbox" class="colour-button" value="10 - 12" id="btn1214" /><label for="btn1214" class="labe"> 5pm - 7pm</label>
      </center>
      </td>
      <td>


      </td>
            <td>
            <center>
      <input type="checkbox" class="colour-button" value="10 - 12" id="btn10" /><label for="btn10">10am - 12pm</label>
        <input type="checkbox" class="colour-button" value="10 - 12" id="btn12" /><label for="btn12" class="labe">  5pm - 7pm</label>
      </center>
      </td>
      <td></td>
    </tr>
  </table>
</form>


</div>
</center>
<center>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn1" /><label for="btn1">Thursday, March 2nd</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn2" /><label for="btn2" class="labe1">Tuesday, March 7th</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn3" /><label for="btn3">Thursday, March 16th</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn4" /><label for="btn4" class="labe1">Tuesday, March 21st</label>

</center>
<center>
<button  class="disabled white cbtn1 c1" type="submit" id="submit" value="NEXT">NEXT<i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</center>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
$(function() {
      enable_cb();
      $(".colour-button").click(enable_cb);
    });

    function enable_cb() {
      if (this.checked) {
        $("input.colour-button1").removeAttr("disabled");
      } else {
        $("input.colour-button1").attr("disabled", true);
      }
    }

</script>

CSS:

.colour-button {
  display: none;
}
label:hover {
  cursor: pointer;
}
.colour-button + label {
  background:  #c1c1c1;
  color: white;
  border-radius: 5px;
  padding: 5px 10px;
}
.colour-button:checked + label {
  background: #cf5630;
}
.thheader{
    width:135px;
    text-align:center;
    background-color:#FAFAFA;
    color: #18181d;
}
.tables{
    width:800px;
}
.labe{
    padding:5px 18px !important;
}
.colour-button1 {
  display: none;
}
.colour-button1 + label {
  background:  #c1c1c1;
  color: white;
  border-radius: 5px;
  padding: 18px 200px;
}
.colour-button1:checked + label {
  background: #cf5630;
}
.labe1{
    padding:18px 207px !important;
}
.cbtn1.disabled {
 background-color: #c1c1c1;
width:150px;
padding:1em;
border-radius:3px;
border:none;
margin:3em auto;
padding-left:35px;
display:inline;
margin-left:30px;
}

我希望在我从每个部分中选择至少一个之后，使其变为启用状态并呈橙色且可单击。既然它是一个按钮而不是输入，这怎么可能？如您所见，如果尚未选择第一个部分，我已经有一个 javascript 可以使第二个部分不活动。

Answer 1

当您使用 jQuery 时，您可以使用以下代码片段禁用/启用按钮(和其他字段)。

$('#buttonID').prop("disabled", true);

总的来说，你的问题对我来说不是很清楚。有很多方法可以实现你想要的。例如，您可以使用监听器或 onClick 事件。

这是一个小 fiddle (或多或少由您的代码制作)，如果您至少选择一个日期复选框和一个时间复选框，则会激活一个按钮: https://jsfiddle.net/3fc30k5s/

祝你好运:)