LAYUI解决checked的 switch 开关赋值问题

LAYUI解决checked的 switch 开关赋值问题

首先，我在网上找了很多种办法，没有任何一种方法是可以完美解决我的问题的。先说说我的需求。
当我的开关为“打开”时，下方的“属性”栏就会展示出来。当然这个用layui的监听就好了。

html代码

<form id="createPayForm" class="layui-form" lay-filter="create-pay-form" method="post">
    <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">
            <span class="x-red">*</span>玩家账号
        </label>
        <div class="layui-input-inline">
            <input type="text" name="accountName" lay-verify="required" placeholder="请输入玩家账号"
                   autocomplete="off" class="layui-input" id="accountName">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            <span class="x-red">*</span>物品类型
        </label>
        <div class="layui-input-inline">
            <select name="itemType" lay-filter="itemType" lay-verify="required"/>
            <option value="物品" selected>物品</option>
            <option value="点券">点券</option>
            <option value="抵用券">抵用券</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item" id="itemDiv">
        <label class="layui-form-label">
            <span class="x-red">*</span>物品id
        </label>
        <div class="layui-input-inline">
            <input type="text" name="itemId" oninput="clearNoNum(this)" lay-verify="required"
                   placeholder="请输入物品ID" autocomplete="off" class="layui-input" id="itemId">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            <span class="x-red">*</span>数量
        </label>
        <div class="layui-input-inline">
            <input type="text" name="quantity" oninput="clearNoNum(this)" lay-verify="required"
                   placeholder="请输入发放数量" autocomplete="off" class="layui-input" id="quantity">
        </div>
    </div>
    <div class="layui-form-item" id="isEquipmentDiv">
        <label class="layui-form-label">
            是否装备
        </label>
        <div class="layui-input-inline">
            <input type="checkbox" id="isEquipment" name="isEquipment" lay-filter="isEquipment" lay-skin="switch"
                   lay-text="是|否">
        </div>
    </div>
    <div class="layui-form-item" id="propertiesDiv" style="display: none;">
        <input name="properties" type="hidden"/>
        <label class="layui-form-label">
            属性
        </label>
        <div class="layui-input-inline" style="width:190px">
            <div>
                <input type="text" style="display: inline-block; width:90px" name="str" oninput=""
                       placeholder="增加的力量" autocomplete="off" class="layui-input" id="str">
                <input type="text" style="display: inline-block;width:90px" name="dex" oninput=""
                       placeholder="增加的敏捷" autocomplete="off" class="layui-input" id="dex">
            </div>
            <div>
                <input type="text" style="display: inline-block;width:90px" name="int" oninput=""
                       placeholder="增加的智力" autocomplete="off" class="layui-input" id="int">
                <input type="text" style="display: inline-block;width:90px" name="luk" oninput=""
                       placeholder="增加的运气" autocomplete="off" class="layui-input" id="luk">
            </div>
            <div>
                <input type="text" style="display: inline-block;width:90px" name="pad" oninput=""
                       placeholder="增加的物攻" autocomplete="off" class="layui-input" id="pad">
                <input type="text" style="display: inline-block;width:90px" name="mad" oninput=""
                       placeholder="增加的魔攻" autocomplete="off" class="layui-input" id="mad">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            到期时间
        </label>
        <div class="layui-input-inline">
            <input type="text" name="expireDate" oninput="" placeholder="请输入过期日期" autocomplete="off"
                   class="layui-input" id="expireDate">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="create">确定发放</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

layui的监听代码

 form.on('switch(isEquipment)', function (data) {
            let $quantity = $("#quantity");
            if (data.elem.checked) {
                $("#isEquipment").attr("checked",true);
                $("#propertiesDiv").show();
                $quantity.val(1);
                $quantity.attr("disabled", true);
            } else {
                $("#isEquipment").attr("checked",false);
                $("#propertiesDiv").hide();
                $quantity.attr("disabled", false);
            }
        });

第一层问题解决了，使用layui自身的监听即可。好了，这个时候，我还要当“物品类型”选择不是“物品”时，把“物品id”和开关隐藏。

这种也很好实现，都很好处理。
但，有一个问题，那就是，每次“物品类型”选择为“物品”时，我要把“物品id”和开关显示回来，并且，开关状态是“关闭”的（意思就是隐藏“属性”栏）。
这里我直接贴出解决办法，网上很多方法都没有我这个简单。（不是吹）

 form.on('select(itemType)', function (data) {
            let value = data.value;
            if (value == '物品') {
                $("#isEquipmentDiv").show();
                $("#itemDiv").show();
                $("#itemId").val("");
            } else {
                $("#isEquipment").attr("checked",false);
                $("#isEquipment").next(".layui-form-onswitch").click(); //精华，这里如果是打开状态，就使用js控制在点一次，关闭。这样layui的监听才能监听到
                $("#isEquipmentDiv").hide();
                $("#itemDiv").hide();
                $("#itemId").val(value);
            }
        });