javascript - HTML 表单只读 SELECT 标记/输入

Question

根据 HTML 规范，HTML 中的 select 标签没有 readonly 属性，只有 disabled 属性。因此，如果您想阻止用户更改下拉菜单，则必须使用 disabled。

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

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

Answer 1

您应该保留 select 元素 disabled，但还要添加另一个具有相同名称和值的隐藏 input。

如果您重新启用您的 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>