如何防止用户在不使用禁用的情况下更改选择的值？

Question

我有一个很大的表格，里面有很多字段，包括一些选择选项。 我想防止用户在不使用“禁用”的情况下更改选择选项。 因为禁用不包含POST请求中的字段。

我用javascript尝试了以下方法：

field.readonly = true;

但是我发现readonly不能与select一起使用，就像它们与文本输入一样。 因此，我如何防止用户更改选择值。 请记住，我要使用表单发布来发布select的值。

Answer 1

您可以简单地使用css属性的pointer-events: none; 在选择标签中。 它可以防止在下拉菜单中触发任何点击，从而使下拉菜单不起作用，您也可以在表单提交中获得下拉菜单的值。

 .disabledByMe{ pointer-events: none; } 

 <select name="test" class="disabledByMe"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> 

Answer 2

您可以使用preventDefault()并return false; 从键盘和鼠标操作。

<select onkeydown="event.preventDefault(); return false;" onmousedown="event.preventDefault(); return false;">
    <option>A</option>
    <option>B</option>
</select>

另外，我通常要做的是使我不想禁用的内容，获取postdata并将它们重新设置为Disabled。

var $disabled = $('#form").find(':disabled');
$disabled.prop('disabled', false);

var postdata = $('#form').serialize();
$disabled.prop('disabled', true);

$.post('/file.php', postdata, function(data) {});

Answer 3

不确定是否要更改<select>使其一旦更改或以这种方式启动就无法更改。 我假设前者（仅更改过一次？）但是如果是后者，这是一个简单的修改，如果您有问题，请告诉我。 该演示执行以下操作：

• 用户使用后，请禁用<select> 。
• 将<select>值分配给<input type='hidden'>值。
• 为<input type='hidden'>分配了[name= X ] ; X = select.name或X = select.id
• 该表格已设置为将数据发送到实时测试服务器 。 响应将重定向到<iframe> 。
• 如果成功，则响应应指示key/value对， ${nameOfSelect/HiddenInput}:{valueOfSelect/HiddenInput}

演示版

 var M = document.forms.main; var F = M.elements; var FS = F.fieldset0; FS.addEventListener('change', freeze); function freeze(e) { if (e.target.tagName === "SELECT") { var tgt = e.target.id; e.target.disabled = true; var cache = document.querySelector(`input[name=${tgt}]`); cache.value = e.target.value; } } 

 [type=submit] { display: block; } 

 <form id='main' action='https://httpbin.org/post' method='post' target='view'> <fieldset id='fieldset0'> <select id='select0' name='select0'> <option default value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> </select> <select id='select1' name='select1'> <option default value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> </select> <select id='select2' name='select2'> <option default value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> </select> </fieldset> <input id='cache0' name='select0' type='hidden'> <input id='cache1' name='select1' type='hidden'> <input id='cache2' name='select2' type='hidden'> <input type='submit'> <iframe name='view'></iframe>