Using jquery tagit plugin, Is there anyway to disa

Question

I have a page and i am using jquery tagit plugin which works great but i am trying to disable it when i click on a button, and have it have similar behavior to when i disable a select Dropdown like this:

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

Is there anyway to disable and enable the jquery tagit Plugin programatically. I see there is a readonly option on the docs page so I tried doing something like this:

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

but that doesn't seem to do anything.

Any suggestions?

Answer 1

The following demonstrates how you could disable/enable a tagit field.

Updated with David's optimized code.

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

Example

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

Because you want the field to look like a disabled dropdown I opted for this solution. Another solution that tagit supports is if you want to stop tags from being added you can utilize the beforeTagAdded (function, Callback) function. And return false in order to stop new tags from being created...

Here is an example of that.

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

Answer 2

Remove the quotation enclosing the readOnly.

This should work:

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

Answer 3

There is a simple way

- To disabled

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

- To enabled

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

Answer 4

I found a way to make Tag-it entirely Read only. It's in this collection of examples:

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

The JS source code that does it is as simple as can be:

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