Question

我有一个页面，我正在使用jquery tagit plugin这很好但我试图在我点击一个按钮时禁用它，并且它具有类似的行为，当我禁用这样的选择下拉列表时：< / p>

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

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

 $("#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
});

使用jquery tagit插件，无论如何都禁用所有条目？

4 个答案: