Read-only or disabled the jquery tags

Question

I am using this http://xoxco.com/projects/code/tagsinput/ for my tags input.

But anyone know how to set the div of tags to be read-only mode or disable it?

Answer 1

try this:

$('#tags').tagsInput({
        'interactive':false
        });

if you want to disable the remove 'X'. use this below.

$('.tagsinput').find('a').remove();

Answer 2

This should work:

$('.tagsinput input').attr('disabled', 'disabled');

To make it editable, you can do:

$('.tagsinput input').removeAttr('disabled');

Answer 3

I'll throw another contender into the ring for this question. I didn't like the accepted answer, because then enabling it again after being disabled wasn't easy.

I found an easy method: use CSS.

The following CSS works great, and doesn't need JS or mucking up the widget's DOM.

.bootstrap-tagsinput.disabled {
    border: none;
    box-shadow: none;
}
.bootstrap-tagsinput.disabled input {
    display: none;
}
.bootstrap-tagsinput.disabled .badge span[data-role="remove"]{
    display: none;
}

You can also change the badge colors when disabled:

.bootstrap-tagsinput.disabled .badge {
    background-color: #ccc;
    border: 1px solid #ababab;
}

Then, when you want to enable/disable, simply add or remove the disabled CSS class form the root of this element (the one with the bootstrap-tagsinput CSS class).