jquery - 只读或禁用 jquery 标签

Question

我正在使用这个 http://xoxco.com/projects/code/tagsinput/ 作为我的标签输入。

但是有人知道如何将标签的 div 设置为只读模式或禁用它吗？

Answer 1

尝试这个：

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

如果要禁用删除“X”。在下面使用它。

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

Answer 2

这应该有效：

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

要使其可编辑，您可以执行以下操作：

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

Answer 3

对于这个问题，我会再提出一个竞争者。我不喜欢接受的答案，因为在被禁用后再次启用它并不容易。

我找到了一个简单的方法：使用 CSS。

下面的 CSS 效果很好，不需要 JS 或破坏小部件的 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;
}

您还可以在禁用时更改徽章颜色：

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

然后，当您想要启用/禁用时，只需在disabled该元素的根（具有bootstrap-tagsinputCSS 类的那个）中添加或删除 CSS 类。

Answer 4

对我来说：

var tagsinput = $('#id-tagsinput').next();
tagsinput.removeClass('bootstrap-tagsinput');
tagsinput.find("input").remove();
tagsinput.css("padding-bottom", "10px");

或（更好）

var tagsinput = $('#id-tagsinput').next();
$('[data-role="remove"]').remove();
tagsinput.find("input").remove();
tagsinput.css("padding-bottom", "10px");