javascript - 更改 'greyed-out-ness' 的 html Bootstrap 按钮和 javascript 的级别

Question

我有一个表单提交按钮，默认情况下是灰色的，只有当复选框被选中时才会激活。

该按钮使用 bootstrap btn-success 类(因此它是绿色的)，但是当停用时它仍然是非常绿色的并且可能被误认为是事件按钮。有没有办法用 javascript 控制它的灰色程度？

我当前的代码:

按钮:

<input type="submit" id="postme1" value="submit" class="btn btn-lg btn-block">

脚本:

 <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    if($(this).prop('checked')){
             $('#postme1').removeAttr('disabled');
        }
        else {
            $('#postme1').attr("disabled","disabled");   

        }

$('#checky1').click(function(){

    if($(this).prop('checked')){
         $('#postme1').removeAttr('disabled');
    }

    else {
        $('#postme1').attr("disabled","disabled");   
    }
});
});//]]>  

</script>

感谢任何帮助或指导

Answer 1

您不需要 javascript，只需更改 CSS。寻找这个位(假设 bootstrap 3)

.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
  background-color: #5cb85c;
  border-color: #4cae4c;
}

然后直接在 CSS 中或通过在您自己的样式表中覆盖此选择器，将颜色更改为您喜欢的颜色。

更新: 如果您想更改不透明度，而不是将颜色更改为更灰，那么您可以使用 .btn.disabled 选择器