Question

我有一些禁用我的文本框的JQuery。默认情况下，它不会将颜色变为浅灰色。所以我添加了更多JQuery，以便在禁用时将其变为淡灰色，但我希望它回到它的默认CSS（我在样式表中创建）。无论如何基本上都有，但是在禁用时会在文本框上询问淡绿色，并在文本框关闭时将其删除？

当前的JQuery

    if ($("#checkBoxName").is(":checked")) {
        $("#textBoxName")
            .attr("disabled", "disabled")
            .val("")
            .css("background-color", "lightgray")
    }
    else {
         $("#textBoxName")
            .removeAttr("disabled")
            .css("background-color", "red");
    }

Answer 1

通过执行

，只需在css中为lightgrey样式创建新规则

#textBoxName:disabled { 
    background: lightgrey;
}

欲了解更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled

Answer 2

实现的一种方法是将CSS与两个类结合起来，而不是添加CSS，而是添加类：

$(document).ready(function(){
    $('#click').click( function(){
        if ( $('#textBoxName').hasClass('red') ) {
            $('#textBoxName').removeClass('red').addClass('grey');
        } else {
            $('#textBoxName').removeClass('grey').addClass('red');
        }
    })
});

这样，您可以控制已应用的CSS，并且可以删除应用的CSS＆＃34; XD。检查小提琴：http://jsfiddle.net/VdJ97/

Answer 3

//if (document.getElementById('uno').checked) {} else {}

$(function(){
$('#checkBoxName').click(function() {
    if (this.checked) {
        $("#textBoxName")
            .attr("disabled", "true")
            .val("")
            .css("background-color", "silver")
    }
    else {
         $("#textBoxName")
            .removeAttr("disabled")
            .css("background-color", "red");
    }
});    
});

JQuery禁用文本框而不是变成淡灰色

3 个答案: