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

mwg9r5ms  于 2023-04-18  发布在  Bootstrap
关注(0)|答案(5)|浏览(241)

我有一个引导选择readonly="true",但我仍然可以改变所选的选项。
我需要disabled="true"行为,但是当我使用它时,选择不会被提交。
我需要2的组合,所选的选项不能改变,但选择必须提交。
我可以使用隐藏字段,但我希望有一个更简单的解决方案。

x6yk4ghg

x6yk4ghg1#

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

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

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

p4rjhz4m

p4rjhz4m2#

另一种可能性是使用选择替换下拉菜单,应该可以禁用下拉菜单,但仍然提交隐藏的选择元素的值。但是,您也可以使用隐藏的字段...
或者,如果禁用了select元素,您实际上可以添加一个包含所选值的隐藏字段。

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

如果隐藏字段与select同名,select的选中值应该覆盖隐藏字段的提交值(例如,当使用js动态启用select字段时)。如果禁用select,则发送隐藏字段的值。不确定首先提交的顺序。

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

这个解决方案也应该工作(至少在启用js的情况下).它禁用每个未选中的选项.因此,所选的选项被提交,并且无法更改.
有一个类似的问题html-form-readonly-select-tag-input,已回答

ukdjmx9f

ukdjmx9f3#

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

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

提交前删除已禁用

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

Jquery文档:
从jQuery 1.6开始,.attr()方法对于尚未设置的属性返回undefined。要检索和更改DOM属性,例如表单元素的checked、selected或disabled状态,请使用.prop()方法。

oknrviil

oknrviil4#

我更好的解决方案是不使用禁用。使用jquery来anulate action打开select with
$('select [readonly]').on(“focus”,function(e){ e.preventDefault();});

tzcvj98z

tzcvj98z5#

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

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

相关问题