LayUI實現Checkbox複選框的單選及取消單選,即只能選一個或者全都不選

項目用LayUI進行開發,需求方提出一個範圍權限控制的實現方案。在複選框只能單選的前提下,管理員可以取消勾選,查看所有數據,但普通用戶由於權限限制,不可以取消勾選。

在查找資料的過程中,發現jq的常用操作checkbox方法不適用於layui,應使用prop代替attr改變checkbox狀態。

<input type="checkbox" name="chbBtn" value="@item.ScopeExtand" title="@item.name" lay-skin="primary" lay-filter="oneChoose">
              

form.on('checkbox(oneChoose)', function (data) {                
                if (@ViewBag.Islimited.ToString().ToLower() == true) {  //權限限制不能全部取消勾選
                    $("input[name='chbBtn']").prop("checked", false);   //全部取消選中
                    $(this).prop("checked", true);                      //勾選當前選中的選擇框
                }
                else {
                    if(data.elem.checked || data.elem.checked=='true'){
                        $("#divSearchBtns input:checkbox").prop("checked",false);
                        $(this).prop("checked", true);
                    }
                }                
                form.render('checkbox');
            });
            form.render('checkbox'); 

最後,一定不要忘記使用form.render()方法進行渲染。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章