将CSS应用于禁用按钮

Question

I want to view disabled button as:

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:

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

JSFIDDLE:

http://jsfiddle.net/54qJx/

Answer 1

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.

Answer 2

You can use opacity css for graying out disabled button :

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

Working Demo

Answer 3

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.

Answer 4

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');

    });

Answer 5

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.

Answer 6

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

Answer 7

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.

Answer 8

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

Answer 9

set a css class

.bg1 {background:#ddd}

then add it on button

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