如何将select元素设置为readonly('disabled'不会在服务器上传递select值)

Question

当我使用以下任何代码时,select元素看起来像禁用,但选择不在服务器上传递:我想到readonly要使用,但我不知道或是否会解决问题.任何帮助深表感谢.

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

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

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

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

Answer 1

看到这个答案 - HTML表单readonly SELECT标签/输入

您应该禁用select元素,但也要添加具有相同名称和值的另一个隐藏输入.

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

看看这个小提琴,以解释如何将禁用选择中的选定值提取到将在表单中提交的隐藏字段.

<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);
});

希望有所帮助.

Answer 2

为了能够通过select,我只需将其设置为:

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

要么

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

传递请求时.

Answer 3

您可以使用 CSS pointer-events 属性模拟只读选择框：

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

HTML tabindex 属性也将阻止它被键盘 tab 键选中：

<select tabindex="-1">

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

<select tabindex="-1">

Answer 4

没有在提交时禁用所选值..

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

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

这个对我有用..

Answer 5

为了简化这里的事情,这是一个可以实现这一目标的jQuery插件:https://github.com/haggen/readonly

1. 在项目中包含readonly.js.(也需要jquery)

2. 替换.attr('readonly', 'readonly')为.readonly().而已.

   例如,从更改$(".someClass").attr('readonly', 'readonly'); 为$(".someClass").readonly();.