layui checkbox设置只能单选

野性酷女 2023-10-18 14:17 107阅读 0赞

HTML代码：

<fieldset style="border:1px solid #2779aa;height:190px;width:100px;margin-left:15px">          
                                    <form id="indicatorsList" class="layui-form">
                                      <div class="layui-form-item" style="height:190px;margin-bottom:0px;">                                          
                                        <div class="layui-input-block" style="height:28px;margin-left:20px;margin-top:8px">                                 
                                           <input type="checkbox" lay-skin='primary' name='indicators' lay-filter='indicators' value='fa' title="方案"/>
                                        </div>  
                                        <div class="layui-input-block" style="height:28px;margin-left:20px;">                                 
                                           <input type="checkbox" lay-skin='primary' name='indicators' lay-filter='indicators' value='pqi' title="PQI"/>
                                        </div> 
                                        <div class="layui-input-block" style="height:28px;margin-left:20px;">                                 
                                           <input type="checkbox" lay-skin='primary' name='indicators' lay-filter='indicators' value='pci' title="PCI"/>
                                        </div>  
                                        <div class="layui-input-block" style="height:28px;margin-left:20px;">                                 
                                           <input type="checkbox" lay-skin='primary' name='indicators' lay-filter='indicators' value='rqi' title="RQI"/>
                                        </div>  
                                        <div class="layui-input-block" style="height:28px;margin-left:20px;">                                      
                                           <input type="checkbox" lay-skin='primary' name='indicators' lay-filter='indicators' value='rdi' title="RDI"/>
                                        </div>                                                                                        
                                      </div>
                                    </form>
                                  </fieldset>

js代码：

layui.use(['layer', 'element', 'form'], function() { //独立版的layer无需执行这一句
            var $ = layui.jquery,
                layer = layui.layer,
                form = layui.form,
                element = layui.element; //独立版的layer无需执行这一句  
                form.on('checkbox(indicators)', function(data){       
                    $("input[name='indicators']").prop("checked", false);   //全部取消选中
                    $(this).prop("checked", true);                          //勾选当前选中的选择框     
                    form.render('checkbox');    
                });      
                form.render('checkbox');     
        });

发表评论取消回复

表情：

评论列表（有 0 条评论，107人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui checkbox设置只能单选

HTML代码： <fieldset style="border:1px solid 2779aa;height:190px;width:100px;margin

野性酷女/ 2023年10月18日 14:17/ 0 赞/ 107 阅读

相关 el-checkbox 控制只能单选

情况1：只有两个多选框 <el-checkbox-group v-model="form.checkState"> <el-checkbox f

ゝ一纸荒年。/ 2023年06月19日 07:30/ 0 赞/ 843 阅读

相关 js控制复选框checkbox 只能单选

<html> <head> <meta http-equiv="content-Type" content="text/html;charset=utf

落日映苍穹つ/ 2022年10月02日 15:52/ 0 赞/ 255 阅读

相关永久的CheckBox（单选，全选/反选）！

<html> <head> <title>选择</title> <script type="text/javascript" s

不念不忘少年蓝@/ 2022年10月02日 14:46/ 0 赞/ 221 阅读

相关 JavaScript实现多个checkbox只能单选和多选

checkbox单选 : $(':checkbox[name=bizType]').each(function(){

川长思鸟来/ 2022年08月10日 12:45/ 0 赞/ 211 阅读

相关 checkbox多选，单选删除详解

批量删除的功能呢，首先前台页面可以想到使用checkbox来做，这里后台数据库其实有两种删除的方式，如下： ![这里写图片描述][SouthEast] 但是不管数据库以哪种

红太狼/ 2022年05月18日 02:28/ 0 赞/ 700 阅读

相关 layui中的checkbox单/全选事件捕获

layui中全选事件一般用form.on获取而单选一般用table.on来捕获 //checkbox单选点击事件 table.on('checkbox

雨点打透心脏的1/2处/ 2022年03月21日 07:47/ 0 赞/ 1152 阅读

相关复选框Checkbox的只读设置

对于修改页面，后台传递CheckBox选项值后，想固复选按钮值，不让其改变（即只读状态）。 CheckBox只读设置最初，第一反应是使用readonly属性，

绝地灬酷狼/ 2022年03月18日 09:40/ 0 赞/ 669 阅读

相关 bootstraptable设置checkbox单选

[bootstraptable设置checkbox单选][bootstraptable_checkbox] bootstrap-table.js源码里面可配置,搜索singl

比眉伴天荒/ 2021年10月15日 01:49/ 0 赞/ 1524 阅读

相关设置ElementUI表格只能单选效果教程

> Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站

Myth丶恋晨/ 2021年09月08日 03:20/ 0 赞/ 599 阅读