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

Question

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

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

然而，它使按钮透明 -

在：

后：

有没有人知道jQuery是否有替代方案 - 这可能会让它变成灰色，而不是经历创建特定类的麻烦 而不是透明？

提前致谢！

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

嗯，是的。不要完全禁用按钮，自己设置按钮的样式并“杀死”按钮执行任何操作的能力。

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

Answer 3

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

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