javascript - prop()隐藏我的按钮而不是禁用

在事件发生时单击“编辑”按钮后，我已经使用jQuery prop语法启用了“保存”按钮并禁用了“编辑”按钮，我不知道为什么它不可见而不是启用“保存”按钮。

$(document).ready(function() {
  $('#saveProject').click(function() {
    $('#editProject').prop("disabled", false);
    $('#saveProject').prop("disabled", true);
    $('.fields').prop("disabled", true);
    $('.fields').css({
      "border-bottom": "4px solid teal"
    });
  });

  $('#editProject').click(function() {
    $('#saveProject').prop("disabled", false);
    $('.fields').prop("disabled", false);
    $('.green').css({
      "border-bottom": "4px solid green"
    });
    $('.red').css({
      "border-bottom": "4px solid red"
    });
    $('#editProject').prop("disabled", true);
  });

  $('#clearProject').click(function() {
    $('#clearProject').prop("disabled", false);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w3-red">
  <input id="saveProject" type="submit" class="w3-button w3-right w3-col m3" style="background-color:#030066;" value="Save Project" disabled="disabled">
  <input id="editProject" class="w3-button w3-right w3-rightbar w3-col m2" style="background-color:#030066;" value="Edit">
  <input id="clearProject" class="w3-button w3-right w3-rightbar w3-col m4" style="background-color:#030066;" value="Default Values" type="reset">
</div>

最佳答案

CSS修复

.w3-button {
  background-color: #030066;
  color: #fff;
  cursor: pointer;
}

.w3-button[disabled] {
  background-color: #eee;
  color: #888;
  cursor: not-allowed !important;
}

和html

<input id="editProject" class="w3-button w3-right w3-rightbar w3-col m2" value="Edit"
type="button">