转载

Bootstrap 禁用输入框

被禁用的输入框

为输入框设置 disabled 属性可以防止用户输入，并能对外观做一些修改，使其更直观。

如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。如下面实例所示：

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled >

被禁用的 `fieldset`

为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。

`<a>` 标签的链接功能不受影响

我们试图通过设置 pointer-events: none 来禁用 <a class="btn btn-*"> 按钮的链接功能，但是这个 CSS 属性尚未标准化，目前也没有被所有浏览器支持，包括 Opera 18 或 Internet Explorer 11 及更低版本。建议用户自己通过 JavaScript 代码禁用链接功能。

跨浏览器兼容性

虽然 Bootstrap 会将这些样式应用到所有浏览器上，Internet Explorer 11 及以下浏览器中的 <fieldset> 元素并不完全支持 disabled 属性。因此建议在这些浏览器上通过 JavaScript 代码来禁用 <fieldset>。

<form role="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>