禁用复选框按钮不能在JQuery中工作

时间:2015-09-12 03:40:52

标签: javascript jquery checkbox

我正在尝试在选中复选框时启用和禁用按钮,但似乎无法使其正常工作。选中复选框后,该按钮无法启用。

$("input[type=checkbox]").on("click", function() {
  var id = $(this).data("studentcheckboxid");
  var button = $("div").find("[data-studentbuttonid='" + id + "']");
  $(button).prop('disabled', false);
});
<div class="row registerColumns">
  <div class="col-md-6 col-sm-6" style="border: 1px solid brown;">
    <div id="acceptBox" style="padding: 5px; margin: 5px; border: 1px solid black;">
      Accept
      <input type="checkbox" class="studentCheckbox" data-studentcheckboxid=@space.EventId>
    </div>
  </div>
  <div class="col-md-6 col-sm-6" style="border: 1px solid red;">
    <div class="btn btn-primary disabled registerStudent" data-studentbuttonid=@space.EventId style="padding: 5px; margin: 5px; border: 1px solid black;">
      Register Student
    </div>
  </div>
</div>

3 个答案:

答案 0 :(得分:2)

用于改变。在状态更改之前触发Click。

答案 1 :(得分:1)

linear

虽然我找不到任何按钮我自己做了一个小提琴并自己制作了一个按钮,但你可以查看它here

答案 2 :(得分:0)

&#13;
&#13;
   $("input[type=checkbox]").on("change", function() {
  var id = $(this).attr('data-studentcheckboxid');
  var button = $("button[data-studentbuttonid='" + id + "']")
  .prop('disabled', function(i, v) { return !v; });
});
&#13;
<div class="row registerColumns">
  <div class="col-md-6 col-sm-6" style="border: 1px solid brown;">
<div id="acceptBox" style="padding: 5px; margin: 5px; border: 1px solid black;">
  Accept
  <input type="checkbox" class="studentCheckbox" data-studentcheckboxid="SomeId">
</div>
  </div>
  <div class="col-md-6 col-sm-6" style="border: 1px solid red;">
<div class="btn btn-primary disabled registerStudent" data-studentbuttonid="SomeId" style="padding: 5px; margin: 5px; border: 1px solid black;">
  Register Student
</div>
  </div>
</div>

<button data-studentbuttonid="SomeId" style="height: 20px; width: 50px;" disabled>Button</button>
&#13;
&#13;
&#13;

工作Fiddle

相关问题