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事件。

如果您选择至少一个日期复选框和一次复选框，则会出现一个小提琴（或多或少来自您的代码）激活按钮：https://jsfiddle.net/3fc30k5s/

祝你好运：）

如何在上面的所有部分至少点击一个按钮之前，如何禁用下面的按钮

1 个答案: