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

Question

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

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

Answer 1

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