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

时间:2022-10-05 07:53:25

I have a bootstrap select with readonly="true" but I can still change the selected option.

我有一个readstly选择readonly =“true”但我仍然可以更改所选的选项。

I need the disabled="true" behavior, but when I use this the select is not submitted.

我需要disabled =“true”行为,但是当我使用它时,select不会被提交。

I need a combination of the 2, the selected option can not be changed but the select has to be submitted.

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

I could use hidden fields, but I was hoping for an easier solution.

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

3 个解决方案

#1


4  

Another possibility could be to use a select replacement with dropdowns there it should be possible to disable the dropdown but still submitting the value of the hidden select element. But then you could also use hidden fields...

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

Or you really add a hidden field with the selected value in case the select element is disabled.

或者,如果禁用了select元素,您实际上会添加一个带有所选值的隐藏字段。

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

If the hidden field has the same name as the select, the selected value of the select should overwrite the submitted value of the hidden field (e.g. when the select field is dynamically enabled with js). And if the select is disabled the value of the hidden field is sent. Not sure about the order of what is submitted first.

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

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

this solution should also work (at least with js enabled). It disable every not selected option. And therefore the selected option is submitted and it couldn't be changed.

这个解决方案也应该工作(至少启用了js)。它禁用每个未选择的选项。因此,所选选项已提交,无法更改。

There is a similar and already answered question html-form-readonly-select-tag-input

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

#2


7  

I've run into a similar issue and what i do is when the form onsubmit event is fired remove the disabled attributes as the browser will not post disabled attributes back to the server.

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

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

As you mentioned the only other option i have found is to find the values to hidden inputs.

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

#3


1  

At pageload add disabled to readonly

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

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

Before Submit remove disabled

在提交删除禁用之前

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

Note from Jquery doc:

来自Jquery doc的注释:

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

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

#1


4  

Another possibility could be to use a select replacement with dropdowns there it should be possible to disable the dropdown but still submitting the value of the hidden select element. But then you could also use hidden fields...

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

Or you really add a hidden field with the selected value in case the select element is disabled.

或者,如果禁用了select元素,您实际上会添加一个带有所选值的隐藏字段。

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

If the hidden field has the same name as the select, the selected value of the select should overwrite the submitted value of the hidden field (e.g. when the select field is dynamically enabled with js). And if the select is disabled the value of the hidden field is sent. Not sure about the order of what is submitted first.

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

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

this solution should also work (at least with js enabled). It disable every not selected option. And therefore the selected option is submitted and it couldn't be changed.

这个解决方案也应该工作(至少启用了js)。它禁用每个未选择的选项。因此,所选选项已提交,无法更改。

There is a similar and already answered question html-form-readonly-select-tag-input

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

#2


7  

I've run into a similar issue and what i do is when the form onsubmit event is fired remove the disabled attributes as the browser will not post disabled attributes back to the server.

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

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

As you mentioned the only other option i have found is to find the values to hidden inputs.

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

#3


1  

At pageload add disabled to readonly

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

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

Before Submit remove disabled

在提交删除禁用之前

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

Note from Jquery doc:

来自Jquery doc的注释:

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

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