使选择的下拉列表只读（未禁用）答案

【问题标题】：Making Chosen Dropdown Read only (not disabled)使选择的下拉列表只读（未禁用）
【发布时间】：2015-08-17 16:34:39
【问题描述】：

我希望将chosen 下拉菜单设为只读，我需要使用 jQuery 选择器动态地执行此操作。如果我将其设置为禁用：

$("#dropdownDepartment").attr("disabled","disabled").trigger('chosen:updated');

该值未发布，但我需要它。

我试过了

$("#dropdownDepartment").attr('readonly',true).trigger('chosen:updated');

但这不起作用。

我正在使用Chosen v1.4.2 和jQuery v2.1.4。

帮助表示赞赏！谢谢。

【问题讨论】：

你的意思是disable 吗？我的意思是你不想让用户点击它？
如果你想禁用你可以试试这个：- jsfiddle.net/ymou0ffx/1
我不想禁用它。我想让它只读。
另一种选择是清空所有下拉字段并仅填写您要显示的单个选项。

标签： javascript jquery jquery-chosen

【解决方案1】：

对我来说最好的解决方案就是这么丑陋的把戏$("#dropdownDepartment").prop('disabled',true).trigger('chosen:updated').prop('disabled',false)。因此选择被禁用，但来自选择的值已发布。

【讨论】：

这应该是被接受的答案。至少我们不需要处理任何其他隐藏的输入元素创建或其他任何事情。

【解决方案2】：

您可以做一些选择。

禁用下拉菜单并将值存储在隐藏字段中，然后在 POST 中发送。

禁用所有其他选择，以便仅启用所选的一项

$('#dropdownDepartment option:not(:selected)').attr('disabled', true);

禁用下拉菜单并在发帖前启用它
当你想禁用它时，把它变成一个只读文本框

【讨论】：

【解决方案3】：

试试这个：-

var select = $('select');
var oldVal=$('select').val();
select.chosen().on('change',function(e){   
     select.val(oldVal);
   select.trigger("chosen:updated");  
});

Demo

【讨论】：

【解决方案4】：

我也有一个解决方法。所以希望它对未来的人有所帮助（我猜你已经做了解决方案）。

首先将所选选择的所选选项值打印到隐藏输入中，如下所示。对于$_POST 值，从该隐藏输入$_POST['myselect'] 中获取值：

<input type="hidden" name="myselect" value="selected_option_value_goes_here" />

然后禁用选择的选择。但是在禁用它之前将隐藏的输入值设置为当前值是安全的：

$('input[name=myselect]').val($(".chosen-select").val());   
$('.chosen-select').attr("disabled", true).trigger("chosen:updated");

注意如果您不想禁用它，则无需在所选选择的更改事件上更新隐藏输入的值。

A working demo can be found by clicking here.

【讨论】：

【解决方案5】：

我可能会迟到，但我遇到了与 OP 相同的问题。我发现即使它们被禁用也要回发这些值的解决方法是在提交表单时重新启用它们。

$("form").bind("submit", function () {
    $("#TheList *").prop("disabled", false).trigger("chosen:updated");
});

注意TheList后面的[空格][星号]，它是递归地重新启用列表中的每个孩子。

【讨论】：

【解决方案6】：

我们可以通过删除选择容器div上的指针事件来实现异常行为。

即使我们不启用输入，它的值也会与表单提交一起发布

//to disable
$('.chosen').parent().find('.chosen-container').css({'pointer-events': 'none','opacity':0.5});
//to enable
$('.chosen').parent().find('.chosen-container').css({'pointer-events': '','opacity':1});

【讨论】：

【解决方案7】：

试试这个

$("#dropdownDepartment").attr('disabled', 'disabled');
$("#dropdownDepartment").data('chosen').search_field_disabled();
$("#dropdownDepartment").removeAttr('disabled');
$("#dropdownDepartment").trigger('chosen:updated');

【讨论】：