layui radio 单选按钮监听值变化禁用其他控件

最新推荐文章于 2023-05-10 17:03:30 发布

Aimyone

最新推荐文章于 2023-05-10 17:03:30 发布

阅读量686

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/qq_36636312/article/details/119835594

版权

layui 专栏收录该内容

46 篇文章 5 订阅

订阅专栏

1，效果图

在这里插入图片描述

2，功能说明

当我选择【按实际设备】时，数据版本控件可以操作，

当我选择【按设备标准】时，数据版本控件禁用，不可操作

3，代码



   <div class="flex flex-align-center flex-jusity-center height26">
        <div class="layui-form-item flex">
            <label class="layui-form-label" style="margin-left: -15px;">模型</label>
            <div class="layui-input-block marginleft10">
                <div class="layui-input-block">
                    <input type="radio" name="cbmodel" value="half" lay-filter="cbmodel" lay-skin="primary" title="按实际设备">
                    <input type="radio" name="cbmodel" value="all" lay-filter="cbmodel" lay-skin="primary" title="按设备标准">
                </div>
            </div>
        </div>
    </div>

    <div class="flex flex-jusity-center flex-align-center height26">
        <div class="layui-form-item flex">
            <label class="layui-form-label" style="margin-left: -16px">数据版本</label>
            <div class="layui-input-block marginleft10" >
                <select id="version" class="layui-select" name="version" lay-filter="version" onclick="excepttask()" >
                    <option value=""></option>
                </select>
            </div>
            <%--<div class="layui-form-mid layui-word-aux colorred">*</div>--%>
        </div>
    </div>








	layui.use(['form'], function () {
	
		//从后台获取数据版本的下拉值
        selectdata();

        layui.form.on('radio(cbmodel)', function (data) {
            if(data.value=="half"){
                // $('#version').removeAttr("hidden");
                //选择【按实际设备】，移除禁用属性
                $('#version').removeAttr("disabled");
                layui.form.render('select');
            }else{
                // $('#version').attr("hidden","true");
                //选择【按设备标准】，添加禁用属性
                $('#version').val('')
                $('#version').attr("disabled","disabled");
                layui.form.render('select');
            }
        });





	function selectdata() {
	
        $.ajax({
            url: '/**/toversionList',
            dataType: 'json',
            type: 'get',
            success: function (data) {
                $.each(data.list, function (index, item) {
                    $('#version').append(new Option(item.version, item.version));// 下拉菜单里添加元素
                });
                layui.form.render("select");
            }
        })
    }