CODEWITHSUNDEEP
javascriptjqueryhtmlcssasp.net
John
John

Reputation: 103

Apply CSS to disabled input button

    <input type="button" value="Share" id="buttonShareMap" style="float:right; width:68px;" disabled="disabled"/> 

/* Only enable 'SHARE' btns if a checkbox is selected */
         var checkboxes = $("input[type='checkbox']"),
            submitButtShare = $("#buttonShareMap");

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

This code works fine, only enabling the button if a check box is clicked. However I want to use the css classes 'class="edit red btn"', and although the functionality is still working the button appears visible.

I would like to add one css class if button is enabled and another if it is disabled...How Can I do this? thanks

Upvotes: 2

Views: 2732

Answers (5)

Parth Akbari
Parth Akbari

Reputation: 651

Here is the HTML

<input disabled="disabled" class="btn btn-blue span3" type="submit" value="Change">

Here is the CSS

input[disabled].btn:hover,input[disabled].btn:hover,input[disabled].btn:focus{
color:yellow}

Upvotes: 1

gon250
gon250

Reputation: 3545

Helo,

I have made an example for you: http://jsfiddle.net/o82tfxrb/1/

js:

   $(document).ready(function(){
        $('#ck').on('change', function(){
            if ($(this).is(':checked')){
             $('#buttonShareMap').removeClass('red')
             .addClass('blue');
            }else{
                $('#buttonShareMap').removeClass('blue')
             .addClass('red');
            }
        });
    });

html:

<input type="checkbox" id="ck" /> 
<input type="button" class="red" value="Share" id="buttonShareMap"/>

css:

.red{
    background-color:red;
}

.blue{
    background-color:blue;
    color: white;
}

What I am doing is check everytime the user change the checkbox and then I add a class.

I hope it's helps!

Upvotes: 1

Maria
Maria

Reputation: 1211

Just check the button disabled attr or just the checkbox checked value and set classes accordingly. Below I have used the checkbox state.

     checkboxes.click(function () {
         submitButtShare.attr("disabled", !checkboxes.is(":checked"));
         if(checkboxes.is(":checked"))
         {
              submitButtShare.addClass('ifButtonEnabled')
              .removeClass('ifButtoDisabled');

         }
         else
         {
             submitButtShare.addClass('ifButtoDisabled')
             .removeClass('ifButtonEnabled');

         }
     });

Upvotes: 1

Jai
Jai

Reputation: 74738

You can add a new css class here:

submitButtShare.attr("disabled", !checkboxes.is(":checked")).toggleClass('disabled');

now in the css you can use this:

#buttonShareMap.disabled{
    background:#c5c5c5;
    color:#ddd;
}

checkout the sample demo:

$(':checkbox').change(function() {
  $('#buttonShareMap').prop('disabled', this.checked).toggleClass('disabled');
});
.red {
  color: red;
  background:#0ff;
}
#buttonShareMap.disabled {
  background: #c5c5c5;
  color: #ddd;
  cursor: not-allowed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' id='buttonShareMap' class='red' value='buttonShareMap' />
<input type='checkbox' />

Upvotes: 3

stanze
stanze

Reputation: 2480

you can set background color for disable elements, by using below code.

#buttonShareMap:disabled {
    background: #f00;
}

Upvotes: 1

Related Questions