3

I've seen the following code (Using jquery tagit plugin, Is there anyway to disable all entry?) that allows for disabling entry into tagit fields, however, this affects ALL the tagit boxes. I want to be able to disable PARTICULAR tagit entries that are affected when a checkbox is enabled. Is it possible to use this method if I want to disable only particular tagit boxes?

This was the css code I added from the example:

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

Since I couldn't get the above to work for particular tagit boxes instead of it being applied for all, I've gone with this approach:

$('#global').on('click', function(){
    if ( $(this).is(':checked') ) {
        $('#region').tagit("removeAll");
        $('#region').tagit({
             showAutocompleteOnFocus: false, placeholderText: "Global...",
             requireAutocomplete: false,
             tagSource: function()
             {
                    $.ajax({
                        data: {term: " "},
                        success: function(data){
                            return data;
                        }
                    });        
             },
             beforeTagAdded: function(event, ui) {
                     return false;
             }, 
         });
       }
    else {
        $('#region').tagit({
            showAutocompleteOnFocus: true, placeholderText: "Select a region...",
            requireAutocomplete: true,
            allowSpaces:true,
            tagSource: function(request, response) 
            {
                $.ajax({
                    data: { term:request.term },
                    type: "GET",
                    url: "${pageContext.request.contextPath}/region_list",
                    dataType: "json",
                     success: function( data ) {
                        array = data;
                        response($.map(data, function( item ) {
                            return {
                                label: item,
                                value: item
                            };
                            }));
                        }
                });
                },
            beforeTagAdded: function(event, ui) {
                if(array.indexOf(ui.tagLabel) == -1)
                {
                    return false;
                }
                if(ui.tagLabel == "not found")
                {
                    return false;
                }
            },
        }); 
    }
});

The above code removes the tagged options and doesn't allow you to add entries, but I want to disable the box as a whole so that nothing appears in the drop down either.

Community
  • 1
  • 1
A21
  • 181
  • 3
  • 18
  • Could you provide some sample code with what you have done? This is the same code as in the solution to the question that you link to – Alvaro Montoro Oct 06 '14 at 20:39
  • Hi Alvaro, I've added my javascript code as well since I couldn't figure out how to manipulate the CSS to affect only particular boxes. – A21 Oct 07 '14 at 18:18

0 Answers0