更改 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。寻找这个位（假设引导程序 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选择器执行此操作