[JavaScript知识库]关于layui动态给表单元素添加属性和样式

1.要求：radio按钮选择通过拒绝时，拒绝理由动态禁用。

                <div class="layui-form-item">
                    <label class="layui-form-label">审核结果<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input lay-filter="auditStatus" type="radio" name="auditStatus" value="0" title="通过" checked>
                        <input lay-filter="auditStatus" type="radio" name="auditStatus" value="1" title="拒绝" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">拒绝理由</label>
                    <div class="layui-input-block" >
                        <select id="remark" name="remark" class="layui-select"  >
                            <option value="">请选择拒绝理由</option>
                        </select>
                    </div>
                </div>

2.最开始是这么写的，因为radio有默认值“通过”，所以需要一加载页面判断他的值进行添加样式。

f12的时候样式已经添加上了 但是页面不生效

    //auditStatus
    form.on('radio(auditStatus)', function (data) {
        console.log(data.value)
        if (data.value === '0' || data.value === 0) {
            $("#remark").attr("disabled", true);
            $("#remark").addClass("layui-disabled");
        } else {
            $("#remark").attr("disabled", false);
            $("#remark").removeClass("layui-disabled");
        }
    });
    let disabledRemark = function () {
        let remarkTag = document.getElementsByName("auditStatus");
        let remarkValue = remarkTag[0].value;
        if (remarkValue === 0 || remarkValue === '0') {
            $("#remark").attr("disabled", true);
            $("#remark").addClass("layui-disabled");
            form.render()
        }
    }
    disabledRemark();

?需要添加

form.render()

这个方法

    form.on('radio(auditStatus)', function (data) {
        console.log(data.value)
        if (data.value === '0' || data.value === 0) {
            $("#remark").attr("disabled", true);
            $("#remark").addClass("layui-disabled");
            form.render()
        } else {
            $("#remark").attr("disabled", false);
            $("#remark").removeClass("layui-disabled");
            form.render()
        }
    });
    let disabledRemark = function () {
        let remarkTag = document.getElementsByName("auditStatus");
        let remarkValue = remarkTag[0].value;
        if (remarkValue === 0 || remarkValue === '0') {
            $("#remark").attr("disabled", true);
            $("#remark").addClass("layui-disabled");
            form.render()
        }
    }
    disabledRemark();

菜鸟记录一下。

3.当然也可以直接在页面上加上属性

这样就不需要页面一加载通过name选择器获取表单元素的值了，只监听radio就可以了。

?

?