Layui两个单选按钮之间的操作禁用与启用

Layui中使用Js代码对两个单选按钮之间的禁用与启用

需求是这样的：

当点击相互作用时，严重等级的单选按钮前两个禁用并默认选中"相互作用"按钮。

当点击配置禁忌时，严重等级最后一个按钮禁用，并默认选中"配伍问题"。

话不多说，上码(简洁一点就只写需要操作的两个单选按钮)
Html代码：
这里我用的是Layui框架，所以要在结果标识单选框加上监听事件
lay-filter=“beshared” 两个按钮都要加。

严重等级哪里每个按钮都需要加上ID

              //结果标识
                <label class="layui-form-pane layui-form-label" style="margin-left:1px">
                    结果标识
                </label>
                <div class="layui-input-inline" style="width: 397.5px; border-width: 1px; border-style: solid; border-color: #e6e6e6; height: 36px;">
              
                    <input type="radio" name="Jg" value="0" title="配伍禁忌" lay-filter="beshared">
                    <input type="radio" name="Jg" value="1" title="相互作用" lay-filter="beshared">
                </div>
                //严重等级
                <label class="layui-form-pane layui-form-label">
                    严重等级
                </label>
                <div class="layui-input-inline" style="width: 397.5px; border-width: 1px; border-style: solid; border-color: #e6e6e6; height: 36px;">
                **//这三个单选框需要分别加上不同的ID，等下在js中需要用到**
                    <input type="radio" name="Dj" value="0" title="配伍问题" id="inc0">
                    <input type="radio" name="Dj" value="1" title="配伍禁忌" id="inc1">
                    <input type="radio" name="Dj" value="2" title="相互作用" id="inc2">
                </div>

JS代码：

            //单选按钮监听
            form.on('radio(beshared)', function (data) {
            //首先声明一个变量来接收选中按钮值
            var val=$('input:radio[name="Jg"]:checked').val();
            //判断
                    if (val === "0") {
                    //禁用与解禁
                    $('#inc2').prop('disabled', 'disabled'); 
                    $('#inc0').removeAttr('disabled');
                    $('#inc1').removeAttr('disabled');
                    //选中
                    $("input:radio[name=Dj][value=2]").removeAttr('checked');
                    $("input:radio[name=Dj][value=0]").prop("checked", data.value == 0 ? true : false);

                } else if (val === "1") {
                    //禁用与解禁

                    $('#inc2').removeAttr('disabled'); 
                    $('#inc0').prop('disabled', 'disabled');
                    $('#inc1').prop('disabled', 'disabled');
                    //选中

                    $("input:radio[name=Dj][value=0]").removeAttr('checked');
                    $("input:radio[name=Dj][value=2]").prop("checked", data.value == 1 ? true : false);
                }
                //重新渲染，这个很重要，不加这句不会出现效果
                form.render('radio');
            })

基本上到这里就已经实现效果了，剩下的将数据存储到数据库可以使用Ajax传递值到一般处理文件ashx中，以后有空的话再发吧。

总结：
首次接触Layui框架，简洁大方好用，非常符合我们这种后台开发人员使用，主要是不用写前台样式，很多样式Layui都已经写好了，只需要调用就可以了，这点跟Bootstrap很像，但是像我习惯了写.aspx，每一个按钮对应了相应的后台事件，一开始是真的难受，都不知道数据源从哪里来，后来慢慢地适应了，主要是使用Js传递和接收数据，使用Ajax传递数据然后进行前台展示，基本上所有的业务逻辑也都是在js里面，写完啦，有更简单的方法可以在下方评论哦，一起探讨学习。