禁用状态
为输入框设置 disabled 属性可以禁止其与用户有任何交互(焦点、输入等)。被禁用的输入框颜色更浅,并且还添加了 not-allowed 鼠标状态。
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
被禁用的 fieldset
为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。
<a> 标签的链接功能不受影响
默认情况下,浏览器会将 <fieldset disabled> 内所有的原生的表单控件(<input>、<select> 和 <button> 元素)设置为禁用状态,防止键盘和鼠标与他们交互。然而,如果如果表单中还包含 <a ... class="btn btn-*"> 元素,这些元素将只被赋予 pointer-events: none 属性。正如在关于禁用状态的按钮章节中(尤其是关于锚点元素的子章节中)所描述的那样,该 CSS 属性尚不规范,并且在 Opera 18 及更低版本的浏览器或 Internet Explorer 11 总没有得到全面支持,并且不会阻止键盘用户能够获取焦点或激活这些链接。所以为了安全起见,建议使用自定义 JavaScript 来禁用这些链接。
跨浏览器兼容性
虽然 Bootstrap 会将这些样式应用到所有浏览器上,Internet Explorer 11 及以下浏览器中的 <fieldset> 元素并不完全支持 disabled 属性。因此建议在这些浏览器上通过 JavaScript 代码来禁用 <fieldset>。
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>