Using jquery tagit plugin, Is there anyway to disable all entry?

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/