Jquery UI tag-it widget - what's the best way to disable entries? - jquery-ui

Question

For the Jquery UI tag-it widget, I'd like to disable text input into the class="ui-widget-content ui-autocomplete-input" textbox which contains all the tags.
My purpose is to just allow certain people the ability to delete inappropriate tags, but not allow anybody to add tags (which are auto-generated).
Is the best thing for me to edit the tag-it .js file and add a disable="disable" for that field? If I do that, won't that prevent the contents of that field from being submitted? Or does that matter as long as the associated hidden field is submitted?
Or is there a better way of doing this (an overriding style?) without modifying the tag-it file itself?
Thanks,
doug

Answer 1

In tag-it.js I replaced this line:
this._tagInput = $('<input type="text"').addClass('ui-widget-content');
with this:
this._tagInput = $('<input type="text" readonly="readonly"/>').addClass('ui-widget-content');
adding the readonly="readonly" attribute. That had the desired effect of preventing input but still allowing users to delete inappropriate auto-generated tags.

Answer 2

I had the same question as original op.
But as the question is 2 and a half years old, and tag-it version is changed.
The accepted answer needs to be updated to the folowing in
tag-it.js around line 478:
from:
if (this.options.readOnly){
tag.addClass('tagit-choice-read-only');
}
To:
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

This is under the documentation of git repository having the documentation, under the Properties section:
$("#myTags").data("ui-tagit").tagInput.addClass("fancy"); //Obviously
if you want to do something with class...
This translates to the solution for this below, in my personal implementation style, and probably the only way I could get this to work:
$("#myTags").data("ui-tagit").tagInput.prop('disabled' , true);
This is if I understand your question correctly.
Note: ReadOnly does not make the tags un-editable.
As far as going through the tags, you could use ..
var x = $("#myTags").tagit("assignedTags");
Make it as an input field, and that ensures its "singleFieldNode" meaning tags are , (comma) separated. That way you can parse through it (split for commas(,) into an object, or however you want to do it)
PS: To apply any of the snippets above, simply change to the "id" of the HTML element that contains TagIt, and your code would work correctly.
JQuery TagIt v2.0