Twitter bootstrap select readonly 仍然可以更改选项

Posted 2023-03-06

【中文标题】Twitter bootstrap select readonly 仍然可以更改选项

【英文标题】：Twitter bootstrap select readonly still able to change options

【发布时间】：2015-12-27 02:30:19

【问题描述】：

我有一个带有 readonly="true" 的引导选择，但我仍然可以更改所选选项。

我需要disabled="true" 行为，但是当我使用它时，选择不会提交。

我需要2个的组合，选择的选项不能更改但选择必须提交。

我可以使用隐藏字段，但我希望有一个更简单的解决方案。

【问题讨论】：

我不相信任何选择替换插件都会有这种行为，因为标准的select 元素不支持它。如果您需要它，您很可能需要自己编写代码，或者如您所说，禁用该元素并使用隐藏输入。

【参考方案1】：

在页面加载时将禁用添加到只读

$('[readonly]').prop( "disabled", true );

提交前删除禁用

$('[readonly]').prop( "disabled", false );

来自 Jquery 文档的注释：

从 jQuery 1.6 开始，.attr() 方法返回未定义的属性 尚未设置。检索和更改 DOM 属性，例如 表单元素的选中、选择或禁用状态，使用 .prop() 方法。

【参考方案2】：

另一种可能性是使用带有下拉菜单的选择替换，应该可以禁用下拉菜单但仍提交隐藏选择元素的值。 但是你也可以使用隐藏字段...

或者，如果选择元素被禁用，您确实添加了一个带有所选值的隐藏字段。

<input type="hidden" name="whatever">
<select name="whatever">

如果隐藏字段与select同名，则select的选择值应该覆盖隐藏字段的提交值（例如当使用js动态启用select字段时）。如果选择被禁用，则发送隐藏字段的值。 不知道先提交的顺序。

$(document).ready(function()$('select option:not(:selected)').attr('disabled',true););

这个解决方案也应该可以工作（至少在启用 js 的情况下）。它禁用每个未选择的选项。因此，所选选项已提交且无法更改。

有一个类似的并且已经回答的问题html-form-readonly-select-tag-input

【讨论】：

谢谢我用了你最后的解决方案：$('select[readonly] option:not(:selected)').attr('disabled', true);

您能否也突出显示您指向其他帖子的链接，答案比我的更完整，也许我的是重复的？

【参考方案3】：

我遇到了类似的问题，我所做的是当表单 onsubmit 事件被触发时删除禁用的属性，因为浏览器不会将禁用的属性发布回服务器。

$('form').submit(function ()  $('[disabled]').removeAttr('disabled'); )

正如你提到的，我发现的唯一其他选择是找到隐藏输入的值。