Twitter bootstrap 选择只读仍然可以更改选项

问题描述 投票:0回答:6

我有一个带有

readonly="true"
的引导程序选择,但我仍然可以更改所选选项。

我需要

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

我需要两者的组合,所选选项无法更改,但必须提交选择。

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

jquery css twitter-bootstrap twitter-bootstrap-3 yii2
6个回答
13
投票

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

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

正如您提到的,我发现的唯一其他选项是查找隐藏输入的值。


8
投票

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

或者您确实添加了一个包含所选值的隐藏字段,以防选择元素被禁用。

<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


3
投票

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

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

提交前删除禁用

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

Jquery 文档的注释:

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


3
投票

这是我的解决方案,对我来说最简单的解决方案:

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

1
投票

我更好的解决方案是不使用禁用。 使用 jquery 分析打开 select 的操作

$('select[readonly]').on("focus", function(e){ e.preventDefault(); });


-1
投票

我们需要您尽快回复。如果您无法再参与 PHP 升级项目,请在离开之前将所有信息发送给我们。

© www.soinside.com 2019 - 2024. All rights reserved.