Checkbox button disabled not working in JQuery

Question

I'm trying to enable and disable a button when a checkbox gets checked, but can't seem to get it working. The button doesn't enable when I check the 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" [email protected]>
    </div>
  </div>
  <div class="col-md-6 col-sm-6" style="border: 1px solid red;">
    <div class="btn btn-primary disabled registerStudent" [email protected] style="padding: 5px; margin: 5px; border: 1px solid black;">
      Register Student
    </div>
  </div>
</div>

possible duplicate of Disable/enable an input with jQuery?

Sabyasachi Mishra
– Sabyasachi Mishra

2015-09-12 04:04:26 +00:00
Commented Sep 12, 2015 at 4:04 — Sabyasachi Mishra
– Sabyasachi Mishra, Commented Sep 12, 2015 at 4:04

polent · Accepted Answer · 2015-09-12 03:50:08Z

2

Use on change. Click is fired before state change.

answered Sep 12, 2015 at 3:50

polent

211 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Nomesh DeSilva Over a year ago

welcome to community. please associate your answer with some code segment. you may read the stackoverflow help guide on how to write a good answer.

guradio · Accepted Answer · 2015-09-12 03:55:40Z

1

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

Although i cant find any button i made a fiddle and made a button myself you can check it here

answered Sep 12, 2015 at 3:55

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Comments

hammus · Accepted Answer · 2015-09-12 04:01:32Z

0

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

Working Fiddle

edited Sep 12, 2015 at 4:01

answered Sep 12, 2015 at 3:57

hammus

2,6222 gold badges21 silver badges37 bronze badges

2 Comments

guradio Over a year ago

If you click again the button will not be disable. more like toggle

hammus Over a year ago

Right you are, sir. Updated.

Collectives™ on Stack Overflow

Checkbox button disabled not working in JQuery

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related