Javascript 将CSS应用于禁用按钮

我想将禁用的按钮视为：

标有红色的按钮为禁用按钮，绿色按钮为启用按钮

我正在尝试应用CSS来执行以下操作：

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

但它并没有像图中提到的那样出现

对我来说是这样的：

对于上述禁用的按钮（用红色标记），我需要使用哪个CSS属性

JSFIDDLE:

第

$（“#btnSearch”）.css（{'background'：“#gray”}行中出现错误

试试这个

你的钮扣

搜索

剧本

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

})

如果要使用CSS而不是Javascript来设置选择器的样式，则可以使用选择器：

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

编辑：

您的问题是，您的按钮的样式为内联
样式
-标记。使用这些工具通常是个坏主意，因为它会让维护更大的页面成为一场噩梦。有关详细信息，请阅读本文：

请参阅以获取如何执行此操作的示例。我在这里所做的是使用技巧覆盖内联样式属性。
使用
prop（）

@熊格里尔
检查此更新，其工作符合您的要求。
设置背景颜色不会使按钮看起来像您圈出的两个按钮，因为看起来有更多CSS在工作，然后只需将背景设置为灰色即可

你可以用

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

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

但是您可能需要调用它4或5次，才能使用不同的元素获得所需的效果

否则，您可以使用

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

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

其中disabled是您使用正确样式创建的CSS类（背景灰、文本颜色较深等）。据猜测，这两个红色圆圈按钮添加了一个类，使其看起来被禁用，因此您可以将该类添加到要禁用的按钮。
如果您想将“#”与颜色一起使用。然后必须使用颜色十六进制值而不是名称
设置css类

.bg1 {background:#ddd}

然后将其添加到按钮上

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

您可以使用
opacity
css灰显
disabled
按钮：

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

您只需通过此按钮禁用按钮即可

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

还可以使用更改背景颜色

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

请检查使用情况

顺便说一句，当使用像灰色这样的颜色名称时，你不需要在名称前面加一个“#”，这就是为什么你的背景色设置不起作用的原因。
css函数应该是这样工作的

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

});

你也可以使用attr，但我更喜欢prop

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

    });

为我们显示按钮的html。如果可以的话，分享JSFIDLE。
“#gray”
应该是
gray
@Hanky웃帕基没有效果……我试过了好的，你能举起小提琴吗？@Hanky웃Panky按钮已禁用，但未按第一节中所述查看image@BearGrylls检查我的更新答案和小提琴演示，它按照您的要求工作，请尝试更改颜色的名称。
background
将覆盖
background color
，因此您可以删除该行。@FuzzBall007更正：）他不一定需要添加其他类。他只需使用禁用按钮上的
：disabled
-选择器即可。看看我的答案，看看我的意思。他已经具有disabled属性，不需要另一个类。他的问题是按钮的内联CSS。看看他的小提琴，他自己决定是使用不透明还是背景色。他不需要使用
opacity
@Padarom，他希望看到按钮被禁用，这是解决方案之一。