只读或禁用jquery标记

Posted 2021-04-24

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

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

答案

试试这个：

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

如果你想禁用删除'X'。使用以下内容。

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

另一答案

这应该工作：

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

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

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

另一答案

对我来说：

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");

再见

另一答案

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

我找到了一个简单的方法：使用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 CSS类，形成该元素的根（具有bootstrap-tagsinput CSS类的那个）。