CODEWITHSUNDEEP
javascriptjquerycsshtml
C Sharper
C Sharper

Reputation: 8626

Apply CSS to disabled button

I want to view disabled button as:

enter image description here

The one marked with red is a disabled button and the green one is enabled.

I am trying to apply CSS to do the same as follows:

 $(document).ready(function () {
     $('#btnSearch').attr("disabled", true);
     $("#btnSearch").css({ 'background': "#grey" });
 });

But its not showing up as mentioned in the image.

Its looking for me like this:

enter image description here

Which CSS attribute do I need to use for disabled buttons as above (marked in red)?

JSFIDDLE:

http://jsfiddle.net/54qJx/

Upvotes: 0

Views: 1050

Answers (9)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can use opacity css for graying out disabled button :

$('#btnSearch').prop('disabled',true).css('opacity','0.5');

Working Demo

Upvotes: 2

Randall
Randall

Reputation: 161

you can simply disable a button by this

$('#btnSearch').prop('disabled', true);

also change the background color with

$('#btnSearch').css('background-color', 'gray');

check the .css() API for usage.

btw when using color name like gray, you don't need to put a '#' ahead of the name, that's why your setting of background color doesn't work.

Upvotes: 2

Sharique
Sharique

Reputation: 4219

css function should be like this to work.

 $(document).ready(function () {
    $('#btnSearch').prop("disabled", true);
    $("#btnSearch").css('background-color','grey');

});

You can also use attr, but I prefer prop

 $(document).ready(function () {
        $('#btnSearch').attr("disabled", true);
        $("#btnSearch").css('background-color','#ccc');

    });

Upvotes: 2

Chirag Vidani
Chirag Vidani

Reputation: 2577

Try out with prop()

 $(document).ready(function () {
        $('#btnSearch').prop("disabled", true);
        $("#btnSearch").css({ 'background': "gray" });
 });

@BearGrylls Check this updated fiddle demo, its working as per your requirement.

Upvotes: 2

padarom
padarom

Reputation: 3648

You can use the CSS3 :disabled selector, if you want to style it with CSS instead of Javascript:

#btnSearch:disabled {
   background-color: grey !important;
}

edit:

Your problem is, that your button is styled with an inline style-tag. It's generally a bad idea to use these, as it makes maintaining larger pages a nightmare. Read this article for more information: Best Practices: Avoid Inline Styles for CSS.

See this fiddle for an example of how to do it anyways. What I'm doing here is using this trick to override the inline style properties.

Upvotes: 1

budamivardi
budamivardi

Reputation: 760

set a css class

.bg1 {background:#ddd}

then add it on button

$(document).ready(function () {
        $('#btnSearch').attr("disabled", true);
        $("#btnSearch").addClass("bg1");
});

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20418

Error in line $("#btnSearch").css({ 'background': "#gray" });

Try this

Your Button

<button id="btnSearch" onclick="TeacherData_OnSearch()" style="background-color: #249FDA; color: white; height: 22px; width: 45px; border-radius: 4px;">Search</button>

Script

$(document).ready(function () {
    $('#btnSearch').attr("disabled", true);
    $('#btnSearch').css("background-color", '');
    $("#btnSearch").css({
        'background-color': "grey"
    });

})

DEMO

Upvotes: 0

Bharat Bhushan
Bharat Bhushan

Reputation: 2097

if you want to use "#" with color. than you must use color HEX value not the name

Upvotes: 0

Kyhil
Kyhil

Reputation: 39

Setting the background color won't grey won't make the button look like the two you have circled, as it looks like there is more CSS at work then simply setting the background to grey.

you can use 

$("#btnSearch").css({ "element": "new value" });

But you might need to call it 4 or 5 times to get the desired effect with different elements.

Otherwise you can use 

$("#btnSearch").addClass("disabled")

where disabled is a CSS class you've created with the correct styling (background grey, text colour darker etc). At a guess the two red circled buttons have had a class added to them to make them look disabled, so you can just add that class to the button you want to disable.

Upvotes: 0

Related Questions