Question

我想将禁用按钮视为：

enter image description here

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

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

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

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

它像这样找我：

enter image description here

我需要将哪个CSS属性用于上面的禁用按钮（标记为红色）？

的jsfiddle：

http://jsfiddle.net/54qJx/

Answer 1

尝试使用prop()

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

@BearGrylls 检查此更新的fiddle demo，其工作符合您的要求。

Answer 2

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

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

<强> Working Demo

Answer 3

你可以通过这个

简单地禁用一个按钮

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

也可以用

更改背景颜色

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

检查.css() API的使用情况。

顺便说一句，当使用像灰色这样的颜色名称时，你不需要在名字前加上'＃'，这就是为什么你的背景颜色设置不起作用。

Answer 4

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

    });

Answer 5

如果您想使用CSS而不是Javascript设置样式，可以使用CSS3 :disabled选择器：

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

修改

您的问题是，您的按钮采用内嵌style标记设置样式。使用这些通常是一个坏主意，因为它使维护较大的页面成为一场噩梦。阅读本文以获取更多信息：Best Practices: Avoid Inline Styles for CSS。

有关如何操作的示例，请参阅this fiddle。我在这里做的是使用this技巧来覆盖内联样式属性。

Answer 6

行$("#btnSearch").css({ 'background': "#gray" });

中的错误

试试这个

你的按钮

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

脚本

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

})

DEMO

Answer 7

将背景颜色设置为灰色不会使按钮看起来像你圈出的两个，因为看起来有更多的CSS在工作，然后只是将背景设置为灰色。

你可以使用

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

但你可能需要调用它4到5次才能获得不同元素所需的效果。

否则你可以使用

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

其中disabled是您使用正确样式创建的CSS类（背景灰色，文本颜色较暗等）。猜测时，两个红色圆圈按钮已经添加了一个类以使它们看起来处于禁用状态，因此您只需将该类添加到要禁用的按钮即可。

Answer 8

如果你想使用＆＃34;＃＆＃34;有颜色。你必须使用颜色HEX值而不是名称

Answer 9

设置一个css类

.bg1 {background:#ddd}

然后将其添加到按钮

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

将CSS应用于禁用按钮

9 个答案: