Javascript 如何将select元素设置为只读（“已禁用”不会在服务器上传递select值）

当我使用以下任何代码时，select元素do看起来像是禁用的，但select并没有传递到服务器上：我在考虑要使用的readonly，但我不知道这是否会解决问题。非常感谢您的帮助

$('#selectID').prop('disabled',true);

$('#selectID').prop('disabled','disabled');

$('#selectID').attr('disabled',true);

$('#selectID').attr('disabled','disabled');

见-

您应该保持select元素处于禁用状态，但还应添加另一个元素 具有相同名称和值的隐藏输入

如果重新启用SELECT，则应将其值复制到隐藏 onchange事件中的输入

请参阅以说明如何将禁用的select中的选定值提取到将在表单中提交的隐藏字段中

<select disabled="disabled" id="sel_test">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<input type="hidden" id="hdn_test" />
<div id="output"></div>

$(function(){
    var select_val = $('#sel_test option:selected').val();
    $('#hdn_test').val(select_val);
    $('#output').text('Selected value is: ' + select_val);
});

希望有帮助。

为了能够通过选择，我只需将其设置回：

  $('#selectID').prop('disabled',false);

或

---

当传递请求时。

为了简化事情，这里有一个jQuery插件可以实现这个目标：

在项目中包括readonly.js。还需要jquery 将.attr'readonly'、'readonly'替换为.readonly。 就这样

例如，更改为$.someClass.attr'readonly'，'readonly'； 至$.someClass.readonly

---

提交时不禁用所选值

$('#selectID option:not(:selected)').prop('disabled', true);

If you use Jquery version lesser than 1.7
$('#selectID option:not(:selected)').attr('disabled', true);

---

它适合我。

您可以使用CSS模拟只读选择框：

HTML还将阻止通过键盘选项卡选择它：

<select tabindex="-1">

这是一个只读的选择框 选择2 这是一个普通的选择框 选择2

---

尝试只读属性如何？我不想让它变成html。$'selectID'.attr'readonly'，真正可能的@monkeyinsight副本看到这一点，不起作用。你能给我一些关于如何使用这一工作的细节或例子吗？为什么不简单地将问题作为一个副本关闭？@GalV，这会传递到服务器上吗？如果我不禁用select，应该传递什么值？看这一点，这取决于您如何将数据传递到服务器？这是一辆汽车吗？是阿贾克斯吗？通常，在使用表单时，您应该给html元素一个name属性。使用ajax时，您可以在参数字典中决定传递给服务器的内容。提交表单时，表单中具有name属性的每个元素都将发送给服务器。您需要确保只有一个元素在同一时间保留该名称，以select元素上的名称att.开头，如果更改，请将名称att.移动到隐藏字段。removeAttr应使用，而不是开头如果禁用，它将不再以表单形式发送，它必须为“只读”。@PalomiayañezQuiroz，这就是上面的要点-当表单提交时，就在它发出之前，您手动关闭禁用部分。您不能使用指针事件：无。这将阻止元素在单击时接收焦点。出于可访问性的原因，这一点很重要。另外，使用tabIndex来阻止焦点是一个糟糕的想法。盲人或视力受损的用户将无法再阅读该字段的内容，甚至不会注意到该字段存在。工作完美！仍然可以提交值，而用户无法更改选择。泰！

select[readonly]
{
    pointer-events: none;
}

<select tabindex="-1">