HTML 表单只读 SELECT 标记/输入

javascript html

2022-08-29 22:33:41

根据HTML规范，HTML中的标签没有属性，只有属性。因此，如果要防止用户更改下拉列表，则必须使用.selectreadonlydisableddisabled

唯一的问题是禁用的HTML表单输入不包含在POST / GET数据中。

模拟标记的属性并仍获取 POST 数据的最佳方法是什么？readonlyselect

答案 1

您应该保留该元素，但也应添加另一个具有相同名称和值的隐藏元素。selectdisabledinput

如果重新启用 SELECT，则应将其值复制到 onchange 事件中的隐藏输入，并禁用（或删除）隐藏输入。

下面是一个演示：

$('#mainform').submit(function() {
    $('#formdata_container').show();
    $('#formdata').html($(this).serialize());
    return false;
});

$('#enableselect').click(function() {
    $('#mainform input[name=animal]')
        .attr("disabled", true);
    
    $('#animal-select')
        .attr('disabled', false)
    	.attr('name', 'animal');
    
    $('#enableselect').hide();
    return false;
});

#formdata_container {
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form id="mainform">
        <select id="animal-select" disabled="true">
            <option value="cat" selected>Cat</option>
            <option value="dog">Dog</option>
            <option value="hamster">Hamster</option>
        </select>
        <input type="hidden" name="animal" value="cat"/>
        <button id="enableselect">Enable</button>
        
        <select name="color">
            <option value="blue" selected>Blue</option>
            <option value="green">Green</option>
            <option value="red">Red</option>
        </select>

        <input type="submit"/>
    </form>
</div>

<div id="formdata_container" style="display:none">
    <div>Submitted data:</div>
    <div id="formdata">
    </div>
</div>

答案 2

我们还可以禁用除所选选项之外的所有内容。

这样，下拉列表仍然有效（并提交其值），但用户无法选择其他值。

演示

<select>
    <option disabled>1</option>
    <option selected>2</option>
    <option disabled>3</option>
</select>