使用 jquery tagit 插件，是否有禁用所有条目？答案

【问题标题】：Using jquery tagit plugin, Is there anyway to disable all entry?使用 jquery tagit 插件，是否有禁用所有条目？
【发布时间】：2013-11-26 15:43:09
【问题描述】：

我有一个页面，我正在使用jquery tagit plugin，它工作得很好，但是当我点击一个按钮时我试图禁用它，并且当我禁用这样的选择下拉菜单时它具有类似的行为：

 $("#selectDropdown").val(0);
 $('#selectDropdown').prop('disabled', 'disabled');

是否有以编程方式禁用和启用 jquery tagit 插件。我看到有一个只读选项on the docs page 所以我尝试做这样的事情：

 $("#locationTags").tagit({ "readOnly": false });

但这似乎没有任何作用。

有什么建议吗？

【问题讨论】：

嘿，我可以就我的一些答案获得一些反馈吗？这是你想要的吗？如果它遗漏了什么，请告诉我，以便我解决。此外，您将在几个小时内结束赏金，而我对此的回答没有任何反馈。你只是不喜欢奖励你的赏金之类的吗？
我无法在工作中测试答案（jsfiddle 被阻止）所以很遗憾有时无法立即奖励赏金:(
没问题，感谢您回复我。

标签： jquery tag-it disabled-control

【解决方案1】：

有一个简单的方法

- 禁用

 $("#yourtag").tagit({ readOnly: true });
 $(".tagit-close").find(".text-icon").html("");

- 启用

 $("#yourtag").tagit({ readOnly: false });
 $(".tagit-close").find(".text-icon").html("×");

【讨论】：

【解决方案2】：

下面演示了如何禁用/启用tagit 字段。

更新了 David 的优化代码。

    $('#disable').click(function(){
        $('.ui-autocomplete-input').prop('disabled', true).val('');
        $('.tagit-choice').remove();
        $('.ui-widget-content').css('opacity','.2'); 
    });
    $('#enable').click(function(){
        $('.ui-widget-content').css('opacity','1');
        $('.ui-autocomplete-input').prop('disabled', false);    
    });

例子

http://jsfiddle.net/davidThomas/j8Eg4/1/

因为您希望该字段看起来像禁用的下拉菜单，所以我选择了此解决方案。 tagit 支持的另一个解决方案是，如果您想阻止添加标签，您可以使用 beforeTagAdded (function, Callback) 函数。并返回 false 以阻止创建新标签...

这是一个例子。

http://jsfiddle.net/j8Eg4/2/

【讨论】：

为什么选择.ui-autocomplete-input两次，rather than simply chaining？
@DavidThomas 好电话那更好。链接不是我经常做的事情，我需要开始在我的代码中使用或实现它。谢谢
而且，因为我有时间，您还可以将disable 和enable 点击处理程序合二为一（有点“作弊”）：demo。它确实变得有点，嗯，但很愚蠢；这种方法肯定会走得太远......：D
@DavidThomas，哇，代码很复杂。不过很酷。谢谢，我很乐意学习它！

【解决方案3】：

删除包含 readOnly 的引号。

这应该有效：

$("#locationTags").tagit({ readOnly: true });

【讨论】：

【解决方案4】：

我找到了一种使 Tag-it 完全只读的方法。它在这个示例集合中：

http://aehlke.github.io/tag-it/examples.html

实现它的 JS 源代码非常简单：

// Read-only
$('#MyTagID').tagit({
    readOnly: true
});

【讨论】：