Bootstrap 表單禁用

Bootstrap框架的表單控件的禁用狀態(tài)和普通的表單禁用狀態(tài)實(shí)現(xiàn)方法是一樣的，在相應(yīng)的表單控件上添加屬性“disabled”。和其他表單的禁用狀態(tài)不同的是，Bootstrap框架做了一些樣式風(fēng)格的處理：


使用方法為：只需要在需要禁用的表單控件上加上“disabled”即可：


<input class="form-control" type="text" placeholder="表單已禁用，不能輸入" disabled>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：

在使用了“form-control”的表單控件中，樣式設(shè)置了禁用表單背景色為灰色，而且手型變成了不準(zhǔn)輸入的形狀。如果控件中不使用類名“form-control”，禁用的控件只會有一個不準(zhǔn)輸入的手型出來。

在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>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：

據(jù)說對于整個禁用的域中，如果legend中有輸入框的話，這個輸入框是無法被禁用的。我們一起來驗(yàn)證一下：

<form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="顯然我顏色變灰了，但是我沒被禁用，不信？單擊試一下" /></legend>
    …
</fieldset>
</form>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：