4

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?

leora
  • 188,729
  • 360
  • 878
  • 1,366
  • Hey, can I get some feedback on some of my answers? Is this what you want? If it's missing something please let me know so I can address it. Also you have a bounty ending in a few hours and I haven't got any feedback on my answer for it. Do you just not like to award your bounties or something? – Trevor Nov 26 '13 at 22:00
  • I am unable to test answers at work (jsfiddle is blocked) so unfortunately can't award bounties right away sometimes :( – leora Nov 27 '13 at 01:50
  • No problem, thank you for getting back to me. – Trevor Nov 27 '13 at 01:54

4 Answers4

5

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/

Trevor
  • 16,080
  • 9
  • 52
  • 83
  • 1
    Why do you select `.ui-autocomplete-input` twice, [rather than simply chaining](http://jsfiddle.net/davidThomas/j8Eg4/1/)? – David Thomas Nov 26 '13 at 18:09
  • @DavidThomas good call that is better. Chaining is not something I do very often I need to start using or implementing it in my code. Thanks – Trevor Nov 26 '13 at 18:16
  • 1
    And, just because I had a moment, you can also combine the `disable` and `enable` click-handler into one (with a bit of 'cheating'): [demo](http://jsfiddle.net/davidThomas/j8Eg4/3/). It does become a little, um, silly though; this sort of approach can definitely be taken too far... :D – David Thomas Nov 26 '13 at 18:21
  • @DavidThomas, wow that code is complex. Very cool though. Thanks, i'll be happy to study it! – Trevor Nov 26 '13 at 18:27
1

Remove the quotation enclosing the readOnly.

This should work: 

$("#locationTags").tagit({ readOnly: true });
Charles
  • 251
  • 4
  • 12
1

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("×");
grgbrasil
  • 68
  • 7
0

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
});
Henrik R Clausen
  • 59
  • 1
  • 4