Bootstrap 表單控件狀態(禁用狀態)

Bootstrap框架的表單控件的禁用狀態和普通的表單禁用狀態實現方法是一樣的，在相應的表單控件上添加屬性“disabled”。和其他表單的禁用狀態不同的是，Bootstrap框架做了一些樣式風格的處理：

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

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

運行效果如下或查看右側結果窗口：

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

 

在Bootstrap框架中，如果fieldset設置了disabled屬性，整個域都將處於被禁用狀態。

 

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

 

運行效果如下或查看右側結果窗口：

 

 

據說對於整個禁用的域中，如果legend中有輸入框的話，這個輸入框是無法被禁用的。我們一起來驗證一下：

 

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

 

運行效果如下或查看右側結果窗口：