HTML表单只读SELECT标记/输入

Question

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

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

模拟标签readonly属性select并仍然获取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>