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

Question

当我使用以下任何代码时，

select

元素看起来确实被禁用，但选择没有在服务器上传递：我正在考虑使用

readonly

，但我不知道或者这会解决这个问题问题。非常感谢任何帮助。

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

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

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

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

Answer 1

参见这个答案 - HTML 表单只读选择标签/输入

您应该禁用选择元素，但还添加另一个 具有相同名称和值的隐藏输入。

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

请参阅 this fiddle 演示如何将禁用选择中的选定值提取到将在表单中提交的隐藏字段中。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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>

希望有帮助。

Answer 2

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

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

HTML tabindex 属性 也会阻止通过键盘 Tab 键选择它：

<select tabindex="-1">

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


/* irrelevent styling */

*
{
  box-sizing: border-box;
}

*[readonly]
{
  background: #fafafa;
  border: 1px solid #ccc;
  color: #555;
}

input, select
{
  display:block;
  width: 20rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
}

<form>
  <input type="text" value="this is a normal text box">
  <input type="text" readonly value="this is a readonly text box">
  <select readonly tabindex="-1">
    <option>This is a readonly select box</option>
    <option>Option 2</option>
  </select>
  <select>
    <option>This is a normal select box</option>
    <option>Option 2</option>
  </select>
</form>

Answer 3

为了能够通过

select

，我只是将其设置回：

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

或

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

传递请求时。

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

   。

Answer 6

select[readonly] {
  background: #0000; 
  pointer-events: none;
  touch-action: none;
}