锁定 HTML 选择元素，允许在提交时发送值

Question

我在复杂的订单表单上有一个选择框（用于客户字段），当用户开始向订单添加行时，不应允许他们更改客户选择框（除非删除所有行）。

我立即想到的是，我可以使用禁用属性，但是当禁用该框时，所选值将不再传递到目标。

不久前出现问题时，其他开发人员之一通过循环遍历所有选项并禁用除所选选项之外的所有选项来解决此问题，果然该值已传递到目标，并且从那以后我们一直在使用。但现在我正在寻找合适的解决方案，我不想循环所有选项，因为数据正在扩展并且开始引入性能问题。

我不想在点击提交按钮时启用此/所有元素。

如何锁定输入，同时保留所选选项并将该值传递给目标脚本？如果可能的话，我更喜欢非 JavaScript 解决方案，但如果需要，我们正在运行 jQuery 1.4.2，以便可以使用。

编辑

我尝试使用 readonly 属性，但收效甚微，这是我正在使用的 jQuery 代码：

$('.abc').each(function(element) {
    $(this).attr('readonly','readonly');
});

当使用 Firebug 检查元素时，readonly 属性已被设置，但我仍然可以更改该值在选择框中？！

Answer 1

这是可行的：

$('.abc :not(:selected)').attr('disabled','disabled');

jQuery 仍然会在幕后循环元素，但我严重怀疑你是否会遇到性能问题，除非你的选择有数千个元素（在这种情况下，你的可用性问题将远远超过性能问题）。原来的代码一定是做错了什么。

Answer 2

这很好用

<select disabled="true">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">thre</option>
</select>

Answer 3

将隐藏字段添加到表单中，onsubmit 从选择中获取值并将其放入隐藏字段的值中

根据 HTML 规范，select 不支持 readonly标签

Answer 4

该元素不接受只读属性。 Readonly 是一个解决这个问题的包装器。

试试这个：
https://github.com/haggen/readonly

Answer 5

“select”没有只读属性。它只有禁用属性。

http://www.w3schools.com/TAGS/att_select_disabled.asp

所以你最好最好的是：

$('.abc').each(function(element) {
    $(this).attr('disabled','disabled');
});

HTH

Answer 6

禁用任何选择的一个简单方法是禁用鼠标交互。

例如：

<select id="complaint_status" name="complaint_status" class="disabledSelect" value="Pending">
<option value="Pending" selected>Pending</option>
<option value="Complete">Complete</option></select>

css

.disabledbutton {
pointer-events: none;
opacity: 0.4;}

Select 的值将被 SUBMITted。
希望它有效！

Answer 7

我有一个想法，这对我来说很实用：

就我而言，当用户在会计系统表单的下拉列表中选择一个选项（帐户）时，例如某种“费用”，我知道可能不是“贷方”，只是“借方”，另一个选择会计操作（借方/贷方）的下拉菜单将这些下拉菜单更改为“借方”。

然后，我“锁定”（使用“disabled=true”）“借记”选项中的最后一个“下拉菜单”。

我现在遇到的问题与您的类似：禁用下拉元素后，我无法再在目标中接收它。

所以，我做了什么：

1 - 更改了第二个下拉列表中的选项，正如我所说：

document.getElementById("operation").value = "D";

`
2 - 禁用该下拉菜单：

document.getElementById("operation").disabled = true;

然后，“cat salt”：

3a- 添加到“FORM”元素，一个“onsubmit”

onsubmit = "validForm()"

3b - 在我的 [java-script] 文件中，我添加了 [“valid-Form”] 函数：

function validForm()
{
    document.getElementById("operation").disabled = false;
}

瞧！