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

Question

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

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

无论如何以编程方式禁用和启用 jquery tagit 插件。我看到文档页面上有一个只读选项， 所以我尝试做这样的事情：

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

但这似乎无济于事。

有什么建议么？

Answer 1

下面演示了如何禁用/启用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/

Answer 2

删除包含 readOnly 的引号。

这应该有效：

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

Answer 3

有一个简单的方法

- 禁用

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

- 启用

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

Answer 4

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

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

执行此操作的 JS 源代码非常简单：

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