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.