如何在jquery-chosen中禁用已选选项删除(X)，保留新增选项删除功能

我之前也碰到过类似的需求，核心思路就是给Chosen渲染后的初始选中项打上标记，然后单独禁用它们的删除功能，同时保留新增项的删除权限。以下是经过验证的实现步骤：

1. 标记初始选中项 #

Chosen初始化完成后，所有预先选中的项会被渲染到.chosen-container下的.chosen-choices .search-choice元素里。我们可以给这些初始项添加一个自定义类（比如initial-selected）来区分它们：

// 先初始化你的Chosen下拉框
$('.chosen-select').chosen();

// 监听Chosen初始化完成的事件，确保DOM已渲染完成
$('.chosen-select').on('chosen:ready', function() {
  const $chosenContainer = $(this).next('.chosen-container');
  // 给所有初始选中项添加标记类
  $chosenContainer.find('.chosen-choices .search-choice').addClass('initial-selected');
});

2. 禁用初始项的删除功能 #

有两种方式可以实现禁用删除：

方式一：通过CSS隐藏删除按钮 #

直接给标记了initial-selected的项隐藏删除图标，简单直观：

/* 隐藏初始选中项的删除按钮 */
.initial-selected .search-choice-close {
  display: none !important;
}

方式二：通过JS阻止删除事件 #

如果需要更严格的控制（比如防止用户通过其他方式触发删除），可以绑定点击事件并阻止默认行为：

$('.chosen-select').on('chosen:ready', function() {
  const $chosenContainer = $(this).next('.chosen-container');
  $chosenContainer.find('.initial-selected .search-choice-close').on('click', function(e) {
    // 阻止默认删除行为和事件冒泡
    e.preventDefault();
    e.stopPropagation();
    return false;
  });
});

3. 确保新增项保留删除权限 #

当用户手动选中新的分类时，这些项不会带有initial-selected类，所以默认就能保留删除按钮。如果需要确保万无一失，可以监听chosen:selected事件，重置新增项的删除权限：

$('.chosen-select').on('chosen:selected', function() {
  const $chosenContainer = $(this).next('.chosen-container');
  // 移除新增项的删除阻止（如果有）
  $chosenContainer.find('.search-choice:not(.initial-selected) .search-choice-close').off('click');
});

注意事项 #

• 如果你的初始选中项是动态加载的（比如通过AJAX获取后设置选中），需要在动态加载完成、Chosen更新后再执行标记初始项的代码，而不是只依赖chosen:ready事件。可以调用$('.chosen-select').trigger('chosen:updated')后再执行添加类的逻辑。
• 测试时要确保初始项确实被正确标记，你可以通过浏览器开发者工具查看元素是否带有initial-selected类。

内容的提问来源于stack exchange，提问作者Mittul At TechnoBrave