作者：Arthur小熊 | 来源：互联网 | 2023-08-22 11:27
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。在使用了“form-control&
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。
在使用了“form-control”的表单控件中，样式设置了禁用表单背景色为灰色，而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”，禁用的控件只会有一个不准输入的手型出来。
在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态。
对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的。
1 doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>表单控件状态——禁用状态title>
6 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
7 head>
8 <body>
9 <h3>示例1h3>
10 <form role="form" class="form-horizontal">
11 <div class="form-group">
12 <div class="col-xs-6">
13 <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
14 div>
15 <div class="col-xs-6">
16 <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>
17 div>
18 div>
19 form>
20 <br>
21 <br>
22 <br>
23 <h3>示例2h3>
24 <form role="form">
25 <fieldset disabled>
26 <div class="form-group">
27 <label for="disabledTextInput">禁用的输入框label>
28 <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
29 div>
30 <div class="form-group">
31 <label for="disabledSelect">禁用的下拉框label>
32 <select id="disabledSelect" class="form-control">
33 <option>不可选择option>
34 select>
35 div>
36 <div class="checkbox">
37 <label>
38 <input type="checkbox"> 无法选择
39 label>
40 div>
41 <button type="submit" class="btn btn-primary">提交button>
42 fieldset>
43 form>
44 <br>
45 <br>
46 <br>
47 <h3>示例3h3>
48 <form role="form">
49 <fieldset disabled>
50 <legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" />legend>
51 <div class="form-group">
52 <label for="disabledTextInput">禁用的输入框label>
53 <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
54 div>
55 <div class="form-group">
56 <label for="disabledSelect">禁用的下拉框label>
57 <select id="disabledSelect" class="form-control">
58 <option>不可选择option>
59 select>
60 div>
61 <div class="checkbox">
62 <label>
63 <input type="checkbox"> 无法选择
64 label>
65 div>
66 <button type="submit" class="btn btn-primary">提交button>
67 fieldset>
68 form>
69 body>
70 html>
京公网安备 11010802041100号