当前位置： 移动技术网 > IT编程>开发语言>JavaScript > layui下拉框select禁止点击的实现方法

layui下拉框select禁止点击的实现方法

2020年01月08日  | 移动技术网IT编程  | 我要评论

layui表单的下拉选择框select禁止点击/禁用/不可操作的实现方法

直接上代码：

<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">行业类型</label>
        <div class="layui-input-block">
            <select name="industry" id="industry" lay-filter="industry">
                <option value>选择行业类型</option>
                <option value="1001">it服务</option>
                <option value="1002">制造业</option>
                <option value="1003">批发/零售</option>
                <option value="1004">生活服务</option>
            </select>
        </div>
    </div>
</form>
<script src="layui/layui.js"></script>
<script>
layui.use('form', function(){
  var form = layui.form;

});
</script>

可以直接 放到下拉选择框 select 上 （html），这样默认渲染出来的效果就是这样的：

<select name="industry" disabled lay-filter="industry">...</select>

也可以用 jq 控制下拉框 select 禁用效果：

<script src="layui/layui.js"></script>
<script>
layui.use('form', function(){
    var form = layui.form;
    $("#industry").attr("disabled","disabled");
    form.render('select');
});
</script>

注意事项：

  • 依赖加载模块：form
  • 用js或jq把属性设置为 disabled
  • 最后记得刷新 select 选择框渲染 form.render('select')

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网