将 CSS 应用于禁用的输入按钮
Apply CSS to disabled input button
<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 类,如果禁用,我想添加一个 css 类......我该怎么做?谢谢
您可以在此处添加新的 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' />
您可以使用以下代码为禁用元素设置背景颜色。
#buttonShareMap:disabled {
background: #f00;
}
只需选中按钮禁用属性或仅选中复选框值并相应地设置类。下面我使用了复选框状态。
checkboxes.click(function () {
submitButtShare.attr("disabled", !checkboxes.is(":checked"));
if(checkboxes.is(":checked"))
{
submitButtShare.addClass('ifButtonEnabled')
.removeClass('ifButtoDisabled');
}
else
{
submitButtShare.addClass('ifButtoDisabled')
.removeClass('ifButtonEnabled');
}
});
Helo,
我为你举了一个例子: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;
}
我正在做的是每次用户更改复选框时检查,然后添加一个类。
我希望它有所帮助!
这是 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}
相关文章:
- 更改输入按钮's onClick参数
- 通过提示中的循环触发iFrame中的输入按钮(JavaScript)
- 将 CSS 应用于禁用的输入按钮
- 仅对一个输入按钮禁用应用
- 不显示为表单元素的图像输入按钮的动态创建和appendChild
- 如果未选中复选框,则禁用引导输入按钮
- 如果从文件输入按钮调用 .ajaxSubmit() 时,它是必需的表单
- JavaScript - 输入按钮隐藏 - 不起作用
- 输入按钮分隔显示按钮名称和值
- 单击列表中的引导输入按钮将禁用其他按钮
- javascript的事件监听器将下拉列表转换为输入按钮
- 表单验证和提交时提交文本&输入按钮上带有验证的图像
- JQuery-防止表单在输入按钮上提交,out防止按键敲击
- 如何使用javascript移除/隐藏、更改输入按钮的标题
- 检查输入按钮
- 每当我按下输入框内的键盘输入按钮(其中有文本)时,都会出现新的段落
- 每当在文本区域上输入按钮时,都会触发按钮
- 如果 e.keyCode 是“输入”按钮,并且元素包含其他文本,则验证条件
- 单击输入按钮时更新文本区域内容
- 如何显示输入按钮并关闭当前窗口