<think>要禁用
Layui的文本框（input）和选择框（
select），我们可以使用
Layui提供的方法，也可以使用原生的
JavaScript方法，但为了保持
Layui的样式和功能一致性，建议使用
Layui提供的方法。
对于文本框，我们可以通过设置`disabled`属性来禁用。在
Layui中，我们也可以使用`attr`方法来设置，或者使用
Layui的表单模块来重新渲染。
对于选择框，同样可以设置`disabled`属性，但是要注意，
Layui的选择框是经过美化的，直接设置原生
select的`disabled`属性可能
不会立即生效，需要重新渲染表单。
以下是具体的步骤：
1. **文本框禁用**：可以直接在input标签上添加`disabled`属性，或者使用
jQuery的`attr`方法添加。
2. **选择框禁用**：在原生
select上添加`disabled`属性，然后重新渲染表单。
但是，如果我们的表单是使用
Layui动态生成的，那么最好使用
Layui的`
form.render`方法来重新渲染表单，以确保禁用状态生效。
下面是一个示例代码，展示如何禁用文本框和选择框：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf
-8">
<title>禁用文本框和选择框</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
layui@2.6.8/dist/css/
layui.css">
</head>
<body>
<div
class="
layui-form" style="padding: 20px;">
<div
class="
layui-form-item">
<label
class="
layui-form-label">文本框</label>
<div
class="
layui-input
-block">
<input type="text" id="textInput" placeholder="请输入"
class="
layui-input">
</div>
</div>
<div
class="
layui-form-item">
<label
class="
layui-form-label">选择框</label>
<div
class="
layui-input
-block">
<
select id="test
Select">
<option value="">请选择</option>
<option value="1">选项1</option>
<option value="2">选项2</option>
</
select>
</div>
</div>
<div
class="
layui-form-item">
<div
class="
layui-input
-block">
<button
class="
layui-btn" id="disableBtn">禁用</button>
<button
class="
layui-btn" id="enableBtn">启用</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/
layui@2.6.8/dist/
layui.js"></script>
<script>
layui.use('
form', function() {
var
form =
layui.
form;
var $ =
layui.$;
// 禁用按钮点击事件
$('#disableBtn').click(function() {
// 禁用文本框
$('#textInput').attr('disabled', 'disabled');
// 禁用选择框
$('#test
Select').attr('disabled', 'disabled');
// 重新渲染表单，使禁用生效
form.render();
return false;
});
// 启用按钮点击事件
$('#enableBtn').click(function() {
// 移除文本框的禁用
$('#textInput').removeAttr('disabled');
// 移除选择框的禁用
$('#test
Select').removeAttr('disabled');
// 重新渲染表单
form.render();
return false;
});
});
</script>
</body>
</html>
```
**代码解释：**
- 在HTML中，我们定义了一个文本框和一个选择框，以及两个按钮（禁用和启用）。
- 在
JavaScript部分，我们使用`
layui.use`加载
form模块，并获取
form对象和
jQuery对象（
Layui内置的）。
- 当点击禁用按钮时，我们通过
jQuery的`attr`方法给文本框和选择框设置`disabled`属性，然后调用`
form.render()`重新渲染表单，这样
Layui的样式和功能就会更新，
显示出禁用状态。
- 当点击启用按钮时，我们移除`disabled`属性，并再次调用`
form.render()`重新渲染表单，使它们恢复可用状态。
注意：如果
不调用`
form.render()`，选择框的禁用状态可能
不会立即生效，因为
Layui的选择框是
动态生成的，需要重新渲染才能更新状态。
**相关
问题：**
1. 如何禁用
Layui表单中的所有元素？
2.
Layui中如何动态禁用
下拉选择框（
select）的某个选项？
3. 除了禁用，
Layui的表单元素还有哪些常见的状态控制（如只读）？
4. 在
Layui中，如何重置表单元素的状态（包括清除禁用状态）？
请按照要求，在回答的最后提出这四个
问题。</think>要禁用
Layui 的文本框和
select 选择框，可以使用原生 HTML 的 `disabled` 属性结合
Layui 的表单渲染方法。以下是完整解决方案：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf
-8">
<title>禁用
Layui 表单元素</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
layui@2.6.8/dist/css/
layui.css">
</head>
<body>
<div
class="
layui-form" style="padding: 20px;">
<!
-- 文本框
-->
<div
class="
layui-form-item">
<label
class="
layui-form-label">文本框</label>
<div
class="
layui-input
-block">
<input type="text" id="textInput" placeholder="请输入内容"
class="
layui-input">
</div>
</div>
<!
-- 选择框
-->
<div
class="
layui-form-item">
<label
class="
layui-form-label">选择框</label>
<div
class="
layui-input
-block">
<
select id="test
Select">
<option value="">请选择</option>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</
select>
</div>
</div>
<!
-- 操作按钮
-->
<div
class="
layui-form-item">
<div
class="
layui-input
-block">
<button
class="
layui-btn" id="disableBtn">禁用元素</button>
<button
class="
layui-btn" id="enableBtn">启用元素</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/
layui@2.6.8/dist/
layui.js"></script>
<script>
layui.use(['
form', '
jquery'], function(){
var
form =
layui.
form;
var $ =
layui.$;
// 初始渲染表单
form.render();
// 禁用按钮点击事件
$('#disableBtn').click(function(){
// 禁用文本框
$('#textInput').attr('disabled', 'disabled');
// 禁用选择框
$('#test
Select').attr('disabled', 'disabled');
// 重新渲染表单（重要！）
form.render('
select'); // 只重新渲染
select组件
return false; // 阻止按钮默认提交行为
});
// 启用按钮点击事件
$('#enableBtn').click(function(){
// 启用文本框
$('#textInput').removeAttr('disabled');
// 启用选择框
$('#test
Select').removeAttr('disabled');
// 重新渲染表单（重要！）
form.render('
select');
return false;
});
});
</script>
</body>
</html>
```
### 代码解释：
1. **HTML 结构**：
- 创建了文本框和
select 选择框
- 添加了两个操作按钮（禁用/启用）
2. **禁用原理**：
- 使用
jQuery 的 `attr()` 方法添加 `disabled` 属性
- 文本框：`$('#textInput').attr('disabled', 'disabled')`
- 选择框：`$('#test
Select').attr('disabled', 'disabled')`
3. **关键步骤**：
- **必须调用 `
form.render()`**：
Layui 的选择框是
动态生成的组件，修改原生属性后需要重新渲染才能更新 UI 状态
- 使用 `
form.render('
select')` 只重新渲染选择框组件，提高性能
4. **启用操作**：
- 使用 `removeAttr('disabled')` 移除禁用属性
- 同样需要调用 `
form.render()` 更新 UI
### 注意事项：
1. 对于 **
动态生成的选择框**，需要在渲染完成后才能禁用
2. 禁用后表单元素的值**
不会被提交**到服务器
3. 使用 `
form.render()` 时指定组件类型（如 `'
select'`）可优化性能
4. 禁用状态下元素会
显示为灰色，符合
Layui 的 UI 规范
### 替代方案（纯
Layui 方式）：
```
javascript
// 禁用文本框
$('#textInput').add
Class('
layui-disabled').attr('disabled', 'disabled');
// 禁用选择框
$('#test
Select').next('.
layui-form-select').add
Class('
layui-disabled');
$('#test
Select').attr('disabled', 'disabled');
form.render('
select');
```
这种方法添加了
Layui 的禁用样式类 `
layui-disabled`，使禁用状态更符合
Layui 的视觉风格。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1565
