使用JQuery启用按钮

Question

当我点击“编辑”时，我需要启用一个“保存”按钮。我尝试如下所示，但没有任何反应：

​

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

​

Answer 1

您需要使用removeAttr()，而不是removeProp()。或者，您可以使用.prop("disabled", false)更改属性的状态，这将覆盖属性。

您还犯了一个拼写错误：$("btnSave")缺少#。

​

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

​

Answer 2

尝试使用

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

您还可以使用函数，而不是使用单击事件侦听器：

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

和

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