将 CSS 应用于禁用的输入按钮答案

【问题标题】：Apply CSS to disabled input button将 CSS 应用于禁用的输入按钮
【发布时间】：2015-06-04 15:11:16
【问题描述】：

    <input type="button" value="Share" id="buttonShareMap" style="float:right; width:68px;" disabled="disabled"/> 

/* Only enable 'SHARE' btns if a checkbox is selected */
         var checkboxes = $("input[type='checkbox']"),
            submitButtShare = $("#buttonShareMap");

         checkboxes.click(function () {
             submitButtShare.attr("disabled", !checkboxes.is(":checked"));
         });

此代码工作正常，仅在单击复选框时才启用按钮。但是我想使用 css 类 'class="edit red btn"'，虽然该功能仍在工作，但按钮似乎可见。

如果按钮被启用，我想添加一个 CSS 类，如果按钮被禁用，我想添加另一个......我该怎么做？谢谢

【问题讨论】：

标签： javascript jquery html css asp.net

【解决方案1】：

这里是 HTML

<input disabled="disabled" class="btn btn-blue span3" type="submit" value="Change">

这里是 CSS

input[disabled].btn:hover,input[disabled].btn:hover,input[disabled].btn:focus{
color:yellow}

【讨论】：

【解决方案2】：

直升机，

我给你做了一个例子：http://jsfiddle.net/o82tfxrb/1/

js:

   $(document).ready(function(){
        $('#ck').on('change', function(){
            if ($(this).is(':checked')){
             $('#buttonShareMap').removeClass('red')
             .addClass('blue');
            }else{
                $('#buttonShareMap').removeClass('blue')
             .addClass('red');
            }
        });
    });

html:

<input type="checkbox" id="ck" /> 
<input type="button" class="red" value="Share" id="buttonShareMap"/>

css:

.red{
    background-color:red;
}

.blue{
    background-color:blue;
    color: white;
}

我所做的是每次用户更改复选框时检查，然后我添加一个类。

希望对你有帮助！

【讨论】：

【解决方案3】：

只需选中按钮禁用属性或复选框选中值并相应地设置类。下面我使用了复选框状态。

     checkboxes.click(function () {
         submitButtShare.attr("disabled", !checkboxes.is(":checked"));
         if(checkboxes.is(":checked"))
         {
              submitButtShare.addClass('ifButtonEnabled')
              .removeClass('ifButtoDisabled');

         }
         else
         {
             submitButtShare.addClass('ifButtoDisabled')
             .removeClass('ifButtonEnabled');

         }
     });

【讨论】：

你的代码是错误的，因为如果用户'选中'和'取消选中'复选框，它将保留两个类，你必须替换类而不是添加一个类。
你是对的。只是试图保持解决方案的精确性。
没问题:)。我已经编辑了您的代码，因为您可以在一行中完成所有操作。你也可以看看我的回答。就像我正在做的那样。

【解决方案4】：

您可以在这里添加一个新的 css 类：

submitButtShare.attr("disabled", !checkboxes.is(":checked")).toggleClass('disabled');

现在在 css 中你可以使用这个：

#buttonShareMap.disabled{
    background:#c5c5c5;
    color:#ddd;
}

查看示例演示：

$(':checkbox').change(function() {
  $('#buttonShareMap').prop('disabled', this.checked).toggleClass('disabled');
});

.red {
  color: red;
  background:#0ff;
}
#buttonShareMap.disabled {
  background: #c5c5c5;
  color: #ddd;
  cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' id='buttonShareMap' class='red' value='buttonShareMap' />
<input type='checkbox' />

【讨论】：

我认为不是 ' 。 ' 你需要添加 ' : '
这是一个新的 css 类而不是伪选择器。
@stanze 这意味着这个#buttonShareMap.disabled 在 dom 中寻找一个带有 id 和 class 的元素。所以在这种情况下它将是<input type="button" value="Share" id="buttonShareMap" class='disabled' style="float:right; width:68px;" disabled="disabled"/>

【解决方案5】：

您可以使用以下代码为禁用元素设置背景颜色。

#buttonShareMap:disabled {
    background: #f00;
}

【讨论】：