I have a form submission button that is greyed out by default, and is only active when a checkbox is checked.

The button uses the bootstrap btn-success class (so its green), but when deactivate it is still pretty green and could be mistaken for an active button. Is there a way to control how greyed out it is with javascript?

My current code:

Button:

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

Script:

 <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>

Any help or direction is appreciated thanks

I have a form submission button that is greyed out by default, and is only active when a checkbox is checked.

The button uses the bootstrap btn-success class (so its green), but when deactivate it is still pretty green and could be mistaken for an active button. Is there a way to control how greyed out it is with javascript?

My current code:

Button:

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

Script:

 <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>

Any help or direction is appreciated thanks

• javascript
• css
• twitter-bootstrap
• twitter-bootstrap-3

• Why not change the actual class of the button to btn-default (as well as being disabled)? Either way, you're looking to change the opacity. [disabled] buttons have opacity:.65 so you can try from .65 -.99 for more transparency. – Carrie Kendall Commented Feb 10, 2014 at 16:09
• Javascript should not be the answer for this. If you want to change the styles change the CSS or customize bootstrap – Danny Commented Feb 10, 2014 at 16:14

1 Answer 1

You don't need javascript, just change the CSS. Look for this bit (assuming 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;
}

And change the colour to be what you like, either in the CSS directly, or by overriding this selector in your own stylesheet.

UPDATE: If you want to change the opacity, rather than change the colour to be more grey then you can do that using the .btn.disabled selector