Jquery UI tag-it widget -禁用条目的最好方法是什么？

Question

对于Jquery UI tag-it小部件，我想禁用到包含所有标签的class="ui- widget -content ui-autocomplete- input“文本框中的文本输入。

我的目的只是允许某些人删除不合适的标签，但不允许任何人添加标签(这些标签是自动生成的)。

对我来说，最好的做法是编辑tag-it禁用文件并为该字段添加disable="disable“吗？如果我这样做了，会不会阻止该字段的内容被提交？或者，只要提交了关联的隐藏字段，这就有关系吗？

或者有没有更好的方法来做这件事(一种压倒一切的风格？)而不修改tag-it文件本身？

谢谢,

道格

Answer 1

在tag-it.js中，我替换了下面这行：

this._tagInput = $('<input type="text"').addClass('ui-widget-content');

有了这个：

this._tagInput = $('<input type="text" readonly="readonly"/>').addClass('ui-widget-content');

添加readonly="readonly“属性。这达到了阻止输入的预期效果，但仍然允许用户删除不适当的自动生成的标签。

Answer 2

我和最初的行动一样有同样的问题。但由于这个问题已经两年半了，tag-it版本也发生了变化。接受的答案需要更新到下面的

第478行周围的

标记-it.js：

发自：

        if (this.options.readOnly){
            tag.addClass('tagit-choice-read-only');
        } 

至：

            if (this.options.readOnly){
            tag.addClass('tagit-choice-editable');
            // Button for removing the tag.
            var removeTagIcon = $('<span></span>')
                .addClass('ui-icon ui-icon-close');
            var removeTag = $('<a><span class="text-icon">\xd7</span></a>') // \xd7 is an X
                .addClass('tagit-close')
                .append(removeTagIcon)
                .click(function(e) {
                    // Removes a tag when the little 'x' is clicked.
                    that.removeTag(tag);
                });
            tag.append(removeTag);            
        }

Answer 3

它位于具有documentation的git存储库的文档中，位于属性部分下：

$("#myTags").data("ui-tagit").tagInput.addClass("fancy")；//显然，如果您想对类做一些事情...

这转化为下面的解决方案，在我个人的实现风格中，这可能是我能让它工作的唯一方法：

 $("#myTags").data("ui-tagit").tagInput.prop('disabled' , true); 

这是如果我正确理解你的问题的话。注意: ReadOnly不会使标签不可编辑。

至于浏览标记，您可以使用..

var x = $("#myTags").tagit("assignedTags");

将其作为输入字段，这将确保它的"singleFieldNode“意思是用逗号( , )分隔的标记。这样你就可以解析它(将逗号(,)拆分成一个对象，或者以任何你想做的方式)

PS:要应用上面的任何代码片段，只需更改为包含TagIt的HTML元素的"id“，您的代码就可以正常工作。JQuery TagIt v2.0