Geek asks and answers

Change the "greyed-out-ness" level of the html bootstrap and javascript buttons

I have a form submit button that is inactive by default and is active only when the checkbox is checked.

The button uses the bootstrap btn-success class (therefore its green color), but when deactivated, it is still quite green and may be mistaken for the active button. Is there a way to control how greyed out is this with javascript?

My current code is:

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 guidance is appreciated thanks

+3
source share
1 answer

You don't need javascript, just change the CSS. Find this bit (suppose boot 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, .

UPDATE: , , .btn.disabled

+4

More articles:


All Articles