js 将TextBox,input,submit,radio,select,checkbox,textarea 转换成lable 格式

最新推荐文章于 2021-06-19 11:32:39 发布

原创最新推荐文章于 2021-06-19 11:32:39 发布 · 918 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一个JavaScript函数，用于将表单元素转换为只读的DOM元素，包括文本框、复选框、按钮、提交按钮、图片、下拉框和文本区域。函数通过遍历指定容器内的元素，对不同类型的输入元素进行处理，隐藏或修改其显示状态，并在必要时预填充值。

实战派 ESP32-S3，双模无线开发板

ESP32-S3 原生支持 ESP-IDF，WiFi + 蓝牙一次搞定

点击查看

/* 把表单元素转成只读的dom元素 */
function changeFormToViewModeInner(id) {     --ID为一个容器，比如panel,div...
    $("#" + id).find(":text,:radio,:button,:submit,img,:image,:checkbox,select,textarea").not("[NoHidden]").each(function () {
        if ($(this).css("display") == "none") {
            return;
        }
        var tagName = this.tagName.toUpperCase();

        if (tagName == "INPUT") {
            var type = this.type.toUpperCase();
            if (type == 'TEXT') {
                //如果是文本框,则隐藏,并显示value文本
                $(this).closest("td").prepend($(this).val());
                $(this).hide();
            } else if (type == 'CHECKBOX') {
                //如果是复选框,则设置只读,不隐藏
                $(this).attr('disabled', 'disabled');
            } else if (type == 'BUTTON') {
                $(this).hide();
            }
        } else if (tagName == "SELECT") {
            //如果是下拉框, 则隐藏, 并显示value文本
            if ($(this).val() != '') {
                $(this).closest("td").prepend($(this).find(":selected").text());
            }
            $(this).hide();
        } else if (tagName == "TEXTAREA") {
            $(this).closest("td").prepend($(this).val());
            $(this).hide();
        }
    });
    $('.datetime_trigger').hide();
    $('#' + id).find('.red-star').hide();       //去掉红色的*
    $('#' + id).find('img[src*="icon_dictionary.gif"]').parent().hide();    //隐藏选择按钮