小编典典

HTML 表单只读 SELECT 标记/输入

all

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

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

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


阅读 86

收藏
2022-03-03

共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>
2022-03-03