在 html 中禁用/只读选择标签答案

【问题标题】：Disable/readonly select tag in html在 html 中禁用/只读选择标签
【发布时间】：2012-01-08 19:45:26
【问题描述】：

我如何才能将选择标签设为只读。我读过您不能将选择设置为只读。我这样做我可以将其设置为禁用但...这不是一个选项。我希望用户查看选择标签中的其余选项，但无法选择其中一个..

有什么想法吗？

【问题讨论】：

允许用户查看所有选项但不允许他/她选择其中任何一个有什么意义？
我不知道，伙计。我只是程序员。问愚蠢的用户。 :-(
@Relborg，我笑得很厉害，以至于我的同事都用奇怪的眼神看着我。

标签： html select readonly

【解决方案1】：

你可以使用 disabled 属性。

例如。

<select >
  <option disabled="disabled" value="volvo">Volvo</option>
  <option disabled="disabled" value="saab">Saab</option>
  <option disabled="disabled" value="mercedes">Mercedes</option>
  <option disabled="disabled" value="audi">Audi</option>
</select>

【讨论】：

我明白了.. 将每个选项标签设置为禁用，而不是禁用整个选择标签。感谢您的帮助赛夫丁。真的很感激
这会阻止所选值与表单一起提交。
@ButtleButkus 是的，你是对的。表单中的禁用元素将不会被提交而禁用属性将无法与一起使用，因此隐藏字段将用于选定的值。
XML 会损害人眼。元素属性（最小化属性），可以在 HTML 中完成，例如：<option disabled value=audi>Audi</option>

【解决方案2】：

假设标签 id="mySelectID"，并且 jQuery 是常驻的，那么：

<script language="javascript">
// disable all the options that are not in use:
$("#mySelectID option").not(":selected").attr("disabled", "disabled");

// to remove readonly, enable them again:
$("#mySelectID option").not(":selected").attr("disabled", "");
</script>

【讨论】：

jQuery 现在区分属性和属性，所以你也可以这样做：$(selector).prop('disabled', true) 详情：api.jquery.com/prop

【解决方案3】：

我为选项标签使用了选定的禁用值。

它将用于提示用户选择一个选项并同时禁用该选项。

例子：

<option selected disabled>-Select-</option>

【讨论】：

【解决方案4】：

https://coderanch.com/t/469173/select-box-READONLY-true

如果您想禁用选择框，那么您可以使用 javascript 代码在表单提交之前重新启用它。所以在表单的onsubmit事件上，可以开启选择框，使其值在表单提交的时候也被提交...

【讨论】：

【解决方案5】：

您可以通过添加style="pointer-events:none;" 使其成为假只读

【讨论】：