Using jquery tagit plugin, Is there anyway to disa

问题:

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?

回答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/

回答2:

Remove the quotation enclosing the readOnly.

This should work:

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

回答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("×");

回答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
});