jQuery UI 标签禁用选项

在使用 jQuery UI 标签控件时，有时需要将某些标签设为不可选状态，以防止用户对指定的标签进行操作。jQuery UI 提供了简单的选项来完成这个操作。

禁用单个标签

要禁用单个标签，只需要在创建标签时将禁用选项设置为 true 即可。

<div id="tags">
  <ul>
    <li><a href="#">标签1</a></li>
    <li><a href="#">标签2</a></li>
    <li><a href="#">标签3</a></li>
    <li><a href="#">标签4</a></li>
  </ul>
</div>

$( function() {
  $( "#tags" ).tagit({
    availableTags: [ "标签1", "标签2", "标签3", "标签4" ],
    readOnly: true // 禁用所有标签
  });
});

在上面的例子中，标签控件已设置为只读模式，并禁用了所有的标签。

如果只需要禁用单个标签，可以在相应的 li 元素上添加一个自定义的禁用类，然后在创建标签时将这个类传递给 disabledClass 选项即可。

<div id="tags">
  <ul>
    <li class="tag-disabled"><a href="#">标签1</a></li>
    <li><a href="#">标签2</a></li>
    <li><a href="#">标签3</a></li>
    <li><a href="#">标签4</a></li>
  </ul>
</div>

$( function() {
  $( "#tags" ).tagit({
    availableTags: [ "标签1", "标签2", "标签3", "标签4" ],
    disabledClass: "tag-disabled" // 指定禁用类
  });
});

禁用多个标签

要禁用多个标签，可以将这些标签的 li 元素添加到一个数组中，然后使用 jQuery 的 each() 方法将它们传递给 disableTag() 函数。

<div id="tags">
  <ul>
    <li><a href="#">标签1</a></li>
    <li><a href="#">标签2</a></li>
    <li><a href="#">标签3</a></li>
    <li><a href="#">标签4</a></li>
  </ul>
</div>

$( function() {
  var $tag1 = $( "#tags li:eq(0)" );
  var $tag2 = $( "#tags li:eq(2)" );
  var $tag3 = $( "#tags li:eq(3)" );

  $( "#tags" ).tagit({
    availableTags: [ "标签1", "标签2", "标签3", "标签4" ],
  });

  $tag1.add( $tag2 ).add( $tag3 ).each(function() {
    $( "#tags" ).tagit( "disableTag", this );
  });
});

在上面的例子中，前三个标签被禁用了，因为它们的 li 元素被添加到了一个数组中，然后传递给了 disableTag() 函数。