Bootstrap框架的表單控件的禁用狀態(tài)和普通的表單禁用狀態(tài)實現(xiàn)方法是一樣的，在相應(yīng)的表單控件上添加屬性“disabled”。和其他表單的禁用狀態(tài)不同的是，Bootstrap框架做了一些樣式風(fēng)格的處理：
/*源碼請查看bootstrap.css文件第1723行～第1729行*/
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
使用方法為：只需要在需要禁用的表單控件上加上“disabled”即可：
<input class="form-control" type="text" placeholder="表單已禁用，不能輸入" disabled>
運行效果如下或查看右側(cè)結(jié)果窗口：
在使用了“form-control”的表單控件中，樣式設(shè)置了禁用表單背景色為灰色，而且手型變成了不準(zhǔn)輸入的形狀。如果控件中不使用類名“form-control”，禁用的控件只會有一個不準(zhǔn)輸入的手型出來。
/*源碼請查閱bootstrap.css文件第1781行～第1794行*/
input[type="radio"][disabled],
input[type="checkbox"][disabled],
.radio[disabled],
.radio-inline[disabled],
.checkbox[disabled],
.checkbox-inline[disabled],
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"],
fieldset[disabled] .radio,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox,
fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}
在Bootstrap框架中，如果fieldset設(shè)置了disabled屬性，整個域都將處于被禁用狀態(tài)。
<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">禁用的輸入框</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入">
</div>
<div class="form-group">
<label for="disabledSelect">禁用的下拉框</label>
<select id="disabledSelect" class="form-control">
<option>不可選擇</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox">無法選擇
</label>
</div>
<button type="submit" class="btnbtn-primary">提交</button>
</fieldset>
</form>
運行效果如下或查看右側(cè)結(jié)果窗口：
據(jù)說對于整個禁用的域中，如果legend中有輸入框的話，這個輸入框是無法被禁用的。我們一起來驗證一下：
<form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="顯然我顏色變灰了，但是我沒被禁用，不信？單擊試一下" /></legend>
…
</fieldset>
</form>
運行效果如下或查看右側(cè)結(jié)果窗口：
本小節(jié)沒有代碼任務(wù)，單擊“提交”按鈕進行下一個小節(jié)學(xué)習(xí)。
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報