HTML表单只读选择标记/输入

根据HTML规范，HTML中的select标签没有readonly属性，只有一个disabled属性。 所以如果你想让用户不想改变下拉菜单，你必须使用disabled 。

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

模拟select标签的readonly属性的最好方法是什么，仍然可以获取POST数据？

您应该保持disabled select元素，但也要添加具有相同名称和值的另一个隐藏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>

我们也可以使用它

禁用除选定选项之外的所有内容

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

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

演示

您可以在提交时重新启用选择对象。

编辑 ：即，通常禁用选择标记（具有禁用的属性），然后在提交表单之前自动重新启用它：

jQuery示例：

$('#yourSelect').prop('disabled', true);

$('#yourForm').on('submit', function() {
    $('#yourSelect').prop('disabled', false);
});

另外，您可以重新启用每个禁用的输入或选择：

$('#yourForm').on('submit', function() {
    $('input, select').prop('disabled', false);
});

上一篇: HTML form readonly SELECT tag/input

下一篇: How I do to force the browser to not store the html form field data?