Enable a button using JQuery

Question

I need to enable a button "Save" when I click on "Edit". I am trying it like below, but nothing happens:

$(document).ready(function() {
  $("#btnEdit").click(function() {
    $("btnSave").removeProp("disabled");

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-footer">
  <button id="btnEdit" type="button" class="btn btn-danger mt-4">Edit</button>
  <button id="btnSave" type="submit" class="btn btn-success mt-4" disabled>Save</button>
</div>

Barmar · Accepted Answer · 2020-11-17 00:54:53Z

3

You need to use removeAttr(), not removeProp(). Or you can use .prop("disabled", false) to change the state of the property, which overrides the attribute.

You also had a typo: $("btnSave") is missing the #.

$(document).ready(function() {
  $("#btnEdit").click(function() {
    $("#btnSave").removeAttr("disabled");

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-footer">
  <button id="btnEdit" type="button" class="btn btn-danger mt-4">Edit</button>
  <button id="btnSave" type="submit" class="btn btn-success mt-4" disabled>Save</button>
</div>

answered Nov 17, 2020 at 0:54

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

1 Comment

Marcos Carvalho Over a year ago

I did the corrections but did not work. Nothing happens. What could I be missing?

Bassel Ashi · Accepted Answer · 2020-11-17 00:57:55Z

0

Try using

$(document).ready(function() {
  $("#btnEdit").click(function() {
    $("#btnSave").prop("disabled", false);
  });
});

You can also use functions instead of using the click event listener:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-footer">
  <button id="btnEdit" onclick="disableButton(this)" type="button" class="btn btn-danger mt-4">Edit</button>
  <button id="btnSave" type="submit" class="btn btn-success mt-4" disabled>Save</button>
</div>

and

<script>
  function disableEl(el) {
      el.disabled = false;
  }
</script>

answered Nov 17, 2020 at 0:57

Bassel Ashi

161 silver badge3 bronze badges

Collectives™ on Stack Overflow

Enable a button using JQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related