layui 单选框和多选框联动实现多选框的禁用

首先是单选框和多选框的html代码：

        <div class="layui-form-item">
            <label class="layui-form-label">禁用开关</label>
            <div class="layui-input-block">
                <input type="radio" name="demo" lay-filter="erweima" value="true" title="是">
                <input type="radio" id="demoR" name="demo" lay-filter="erweima" value="false" title="否"  checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">多选项</label>
            <div class="layui-input-block" id="div_checkbox" >
                <input type="checkbox" id="test1" name="demo2" title="测试1" value="test1" lay-skin='primary' disabled>
                <input type="checkbox" id="test2" name="demo2" title="测试2" value="test2" lay-skin='primary' disabled>
                <input type="checkbox" id="test3" name="demo2" title="测试3" value="test3" lay-skin='primary' disabled>
            </div>
        </div>

首先是要对于单选框的改变选择的操作要能够监听到。layui里提供了如下的方法来进行监听单选框：
layui.use(‘form’, function () {
form = layui.form;
form.render();
form.on(‘radio(erweima)’, function (data) {
//此处写触发了单选框选项改变的后的处理逻辑代码
form.render();
});
});
有了监听单选框的选择的方法之后，那么接下来就是在这个方法里加入逻辑判断来实现改变单选框按钮从而实现对多选框的禁用和启用。
我们知道Input标签立马可以通过disabled来实现对input标签的禁用，虽然这里是多选框，但从本质上来讲还是input标签，所以可以通过js动态添加和去除disabled属性的方法来实现对多选框的禁用启用。
在jquery里，我们有attr和removeAttr方法来实现添加和删除属性。所以接下来的事情就简单了。代码如下：
layui.use(‘form’, function () {
form = layui.form;
form.render();
form.on(‘radio(erweima)’, function (data) {
if (data.value == “true”) {
$("#test1").removeAttr(“disabled”);
$("#test2").removeAttr(“disabled”);
$("#test3").removeAttr(“disabled”);
} else {
$(’#test1’).attr(“disabled”, true);
$(’#test2’).attr(“disabled”, true);
$("#test3").attr(“disabled”, true);
}
form.render();
});
如此便可实现通过单选框来实现对多选框的禁用启用功能了。