1. 程式人生 > >layui 動態設定checbox 選中狀態

layui 動態設定checbox 選中狀態

最近在使用layui前端框架,在使用單選按鈕、下拉選單select、checkbox等控制元件的時候 往往遇到一些初始化的東西。

有時候會發現,自己動態append進去的程式碼要不就是沒有顯示,要不就是初始化預設選中出問題。

以上這些情況進行了測試:

第一種情況:動態append()html程式碼後沒有顯示空間的解決方案:

新增

layui.form.render();//重新渲染 可以解決多種沒有顯示的情況

第二種情況:動態設定預設選中狀態沒有效果解決方案:

細分為兩種情況:(1)在html頁面程式碼下(沒有在layer初始化框架中,即沒有在layui.use([], function(){  }) 中進行初始化)

                              以初始化checkbox預設選中為例:

$('.xxx').attr("checked", true); //注意這裡使用的是attr()
layui.form.render(); //重新渲染顯示效果

                              (2)在layui.use(); 初始化中初始化一般這種情況會出現在呼叫api介面錯誤之後使用不然checkbox改變狀態

layui.use(['form','layer'],function(){
    var form = layui.form
        layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery;

if ($('.xxxx').attr("checked") === "checked") { //判斷是否選中

                $('.xxxx').prop("checked", true); //設定選中 注意這裡使用的是prop(), 這裡要是使用了attr()是無效的
} else { $('.xxxx').prop("checked", false); } form.render(); //重新渲染 });