有没有办法使用 jQuery 禁用按钮而不使其透明？答案

【问题标题】：Is there a way to disable a button using jQuery without making it transparent?有没有办法使用 jQuery 禁用按钮而不使其透明？
【发布时间】：2017-12-23 17:35:23
【问题描述】：

我在一个项目中使用 jQuery，所以我想我会利用它的一些特定方法。无论如何，我有两个按钮，在某种情况下我想禁用它。像这样：

if (...condition...) {
   $('button#submit, #hint').prop("disabled", true);
}

但是它使按钮变得透明——

之前：

之后：

与其费力地创建一个特定的类，有谁知道 jQuery 是否有替代方案——这可能会使它变灰并且而不是透明的？

提前致谢！

【问题讨论】：

我的意思是..您可以使用 jquery 应用样式，但设置禁用按钮的样式可能更有意义。 jQuery 不应该为您的页面设置样式。
与其费力地创建一个特定的类，但这是最好的解决方案。为什么它不符合您的需求？
可能重复？ stackoverflow.com/questions/14750078/…
在浏览器开发工具元素检查器中 - 检查禁用时应用的 css 规则并修改影响它的 css 规则

标签： javascript jquery

【解决方案1】：

您可以尝试设置disabled CSS 选择器的样式。

$('button').on('click',function(e){
  $(this).prop('disabled', true);
});

:disabled{
  background:red;
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Button
</button>

【讨论】：

.attr 是更改 disabled 属性的错误方法。
@KevinB 这可能不是最佳实践，但它在这里有效。
@freginold 它只会工作一次，直到你想让它不被禁用。
@JosanIracheta 不用担心。两者很容易混淆。
this discussion has been had already

【解决方案2】：

您可以根据自己的喜好使用 jQuery 设置按钮样式。

$('button').on('click',function(e){
   $(this).prop('disabled', true);
   $(this).css('background-color','#CCCCCC');
 });

【讨论】：

【解决方案3】：

嗯，是的。根本不要禁用按钮，自己设置按钮的样式并“取消”按钮执行任何操作的能力。

var btn = document.querySelector("button");

btn.addEventListener("click", btnClick);

function btnClick(){
  console.log("Business as usual.");
}

var chk = document.querySelector("input[type='checkbox']");

chk.addEventListener("change", function(){
  if(this.checked){
    // Kill the click event and alter the style
    btn.classList.add("disabled");
  } else {
    // Restore the look
    btn.classList.remove("disabled");    
  }
});

.disabled {
  pointer-events:none;
  color:#808080;
  
}

<button>Click Me</button>
<input type="checkbox" value="disable">Disable button

【讨论】：

我不喜欢它。
所以？它用简单的标准代码解决了这个问题。有什么不喜欢的？也许我会开始“不喜欢”你的有效答案？
不知道为什么这个答案被否决了......它完全符合 OP 的要求，并有明确的解释。
一个有效的答案和一个好的/有用的答案是两个不同的东西。
@War10ck disabled 伪类根本不适用于这种情况，因为 OP 不喜欢禁用元素所做的事情。因此，需要一种变通方法。