Question

我正在禁用按钮，直到选中了至少一个复选框：

var checkboxes = $("input[type='checkbox']"),
    submitButt = $("input[type='button']");

checkboxes.click(function() {
    submitButt.attr("disabled", !checkboxes.is(":checked"));
});

我的按钮初始状态被禁用但我需要它像淡出或不透明度添加到它，我不知道最好的方法是通过添加类或只是添加CSS？我不是很确定吗？

Answer 1

如果您的意思是要调整已禁用按钮的外观，可以使用CSS attribute presence选择器执行此操作：input[type=button][disabled]：

input[type=button][disabled] {
  color: red;
  opacity: 0.5;
}

这是有效的，因为禁用的按钮具有disabled属性，而启用的按钮则没有。

示例：

＆＃13;

var btn = $("#toggle");
setInterval(function() {
  btn.prop("disabled", !btn.prop("disabled"));
}, 1000);

＆＃13;

input[type=button][disabled] {
  color: red;
  opacity: 0.5;
}

＆＃13;

<input type="button" value="This is enabled">
<input type="button" disabled value="This is disabled">
<input id="toggle" type="button" value="This one goes back and forth">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

以下是添加样式的一种方法：

<button class="btn-disabled" disabled> Test </button>

button:disabled.btn-disabled {
    opacity: 0.5;
}

$("button").addClass( "btn-disabled" );

将类或样式添加到禁用的按钮

2 个答案: