Using the jquery tagit plugin, how can I only disable certain fields?

I have seen the following code ( Using jquery tagit plugin, do you still disable all entries? ) That allows you to disable writing in tagit fields, however, it affects ALL tagit tags. I want to disable the PARITULAR tagit entries that are affected when the checkbox is enabled. Can I use this method if I only want to disable certain tagit fields?

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 specific tagit boxes instead of applying for all, I went 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 does not allow adding entries, but I want to disable the field altogether so that nothing appears in the dropdown.

+3


source to share





All Articles