小编典典

HTML表单只读SELECT标记/输入

javascript

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

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

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


阅读 344

收藏
2020-04-25

共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>
2020-04-25