prop() 隐藏我的按钮而不是禁用答案

【问题标题】：prop() hides my button rather than disablingprop() 隐藏我的按钮而不是禁用
【发布时间】：2017-08-24 08:35:34
【问题描述】：

我已经使用 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>

【问题讨论】：

如果不是$('#saveProject:visible')，您可能会遇到类型错误$('#saveProject.visible')
不，这不是我刚刚尝试过的实际语法 .visible 在那里，当我尝试你的方式时..仍然没有任何反应
“我不知道为什么它是不可见的，而不是启用保存按钮。” 什么？ 0_0
尝试使用 .attr() 而不是 .prop :)
看来你的js没有问题。也许您的CSS隐藏了按钮？ jsfiddle.net/ajpv11xL@HanthonyTagam

标签： javascript jquery css input

【解决方案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">

【讨论】：