我们是否需要使用Twitter Boostrap中的输入/按钮?
问题描述:
例如,对于所有:input:button
,input:submit
,button:button
,button:submit
,我们通过Twitter的引导给这些类:我们是否需要使用Twitter Boostrap中的输入/按钮?
disabled
btn-disabled
然后,我们可以使用禁用这些按钮这样的HTML属性:
-
<input type="button" disabled="disabled" />
,或 <button type="submit" disabled="disabled"></button>
您也可以使用此模式与引导:
-
<input type="button" class="btn btn-disabled" disabled="disabled" />
,或 <button type="submit" class="btn disabled"></button>
用,或不disabled="disabled"
属性,该按钮将在禁用时显示,并显示一个y提供的课程:disabled
或btn-disabled
。
所以我其实有关于这个两个问题:
- 为什么我们需要这些类与属性的混合?
- 如何使用jQuery切换(启用/禁用)这些使用Twitter的Bootstrap?
EDIT(我的jQuery例如用于切换按钮的状态):
$(document).ready(function() {
$('a#disable').click(function() {
$('button').attr('disabled', 'disabled');
$('button').prop('disabled', true);
$('button').addClass('btn-disabled');
$('button').addClass('disabled');
});
$('a#enable').click(function() {
$('button').removeAttr('disabled');
$('button').prop('disabled', false);
$('button').removeClass('btn-disabled');
$('button').removeClass('disabled');
});
// Do we really need this just to disable/enable the button?
});
PS我知道我可以只在属性使用disabled
,但是这不是我的习惯。
答
对于“真实”按钮,例如input:button
或button
,您可以使用属性disabled="disabled"
。无需.disabled
类。
从我所知道的,.disabled
类存在,这样就可以使显示为使用.btn
类也是被禁止的按钮a
标签,所以我只会在这方面使用.disabled
。
尽管我并不熟悉每个Bootstrap类,但在Bootstrap文档中有关按钮的任何部分都没有提及.btn-disabled
。
因此,对于输入和按键操作如下:
$('a#disable').click(function() {
$('button').prop('disabled', true);
});
对于<a>
看起来像纽扣的,这样做:
$('a#disable').click(function() {
$('a#myButton').addClass('disabled');
});
每个案件的一个非常明显的例子见the Bootstrap docs。
PS - 您不需要同时使用.prop()
和.attr()
,因为它们基本上做同样的事情。只要你至少使用jQuery 1.6,.prop()
就好。
谢谢你。直到现在我还不知道attr/removeAttr没有必要!非常感谢!我正在干这个!干杯。 – zlomerovic 2014-09-13 14:13:34