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

Question

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

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

Answer 1

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

Answer 2

$("input[type=checkbox]").on("click", function () {
    var id = $(this).data("studentcheckboxid");
    var button = $("div").find("[data-studentbuttonid='" + id + "']");

    if ($(this).is(':checked')) {
        $(button).prop('disabled', true);
    } else {
        $(button).prop('disabled', false);
    }
});

虽然我找不到任何按钮我做了一个小提琴，并自己做了一个按钮，你可以在这里检查

Answer 3

  $("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; }); }); 

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

工作小提琴