layui的radio,checkbox,select不顯示,不可點擊

解決 layui 在彈窗 layer 表單 form 的下拉框,單選框,複選框渲染失效的問題

一：必須給表單體系所在的父元素加上 class="layui-form"

在一個容器中設定 class="layui-form"  來標識一個表單元素塊，通過規範好的 HTML 結構及 CSS 類，來組裝成各式各樣的表單元素，並通過內置的 form 模塊來完成各種交互。

必須要在外層容器中定義 class="layui-form"，form 模塊才能正常工作。

<form class="layui-form">
    <!-- 這裏是form裏面的代碼 輸入框，選擇框、複選框，單選框等等 -->
</form>

提示：你必須給表單體系所在的父元素加上 class="layui-form"，如果你不想用 form，你可以換成 div 等任何一個普通元素

二： 調用依賴加載模塊：form

依賴加載模塊：form （請注意：如果不加載form模塊，select、checkbox、radio等將無法顯示，並且無法使用 form 相關功能）

<script>
layui.use('form', function(){
  var form = layui.form;
});
</script>

 三：更新渲染

有些時候，你的有些表單元素可能是動態插入的。這時 form 模塊 的自動化渲染是會對其失效的。雖然layui不支持雙向綁定機制，但沒有關係，你只需要執行 form.render(type, filter); 方法即可。

第一個參數：type，爲表單的 type 類型，可選。默認對全部類型的表單進行一次更新。可局部刷新的 type 如下表：

參數（type）值	描述
select	刷新select選擇框渲染
checkbox	刷新checkbox複選框（含開關）渲染
radio	刷新radio單選框框渲染

例：

form.render(); //更新全部
form.render('select'); //刷新select選擇框渲染
//……

---

當我們用layer之後，記得調用更新渲染，即可解決選擇框、複選框、單選框不渲染，不可點擊的問題

例：

<div id="layer-test" style="display: none;">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">複選框</label>
      <div class="layui-input-block">
        <input type="checkbox" name="CSDN" lay-filter="like" title="複選框一" value="dongsir">
        <input type="checkbox" name="CSDN" lay-filter="like" title="複選框二" value="董先生">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">開關關</label>
      <div class="layui-input-block">
        <input type="checkbox" name="switch" lay-skin="switch" value="董輝">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">開關開</label>
      <div class="layui-input-block">
        <input type="checkbox" name="switch" checked lay-skin="switch" value="董先生的CSDN">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      </div>
    </div>
  </form>
</div>
<script src="layui/layui.js"></script>
<script>
layui.use('form', function(){
  var form = layui.form,
      $ = layui.$;

    //layer示例

    layer.open({
        type: 1,
        title: ['董先生的CSDN博客'],
        shade: 0.4,
        area:['900px', '650px'],
        content: $("#layer-test").html(),
        success: function(layero, index){
          form.render();
        }
    });
});
</script>

---

• 本文地址：https://blog.csdn.net/qq6759/article/details/101754693
• 轉載請註明出處

 

文章推薦：

• layui 動態設置 checbox 選中狀態
• layer遮罩擋住窗體問題的解決方法

 

參考：

表單模塊文檔 - layui.form