如何禁用 select2 中的选项

2024-03-29

我想用 select2 来获取用户的偏好。选择一个选项后,其他 select2 中的选项应禁用。

Sample:

偏好 1: 选项1 选项2 选项3 选项4

偏好 2: 选项1 选项2 选项3 选项4

偏好 3: 选项1 选项2 选项3 选项4

偏好 4: 选项1 选项2 选项3 选项4

如果我在首选项 1 中选择选项 1,它应该在首选项 1、2、3、4 中禁用 如果我在首选项 2 中选择选项 2,它应该在首选项 1、2、3、4 中禁用 如果我在首选项 3 中选择选项 3,它应该在首选项 1、2、3、4 中禁用

同样,如果我在首选项 2 中选择选项 4,它应该在首选项 1、2、3、4 中禁用,并且选项 2 应可在首选项 3 和 4 中选择。

我已经厌倦了各种实现,但卡住了。帮帮我。

HTML:

<div class="form-group col-md-6 m-t-sm">
    <label> Select Preference 1: </label>
    <select class="form-control" id="pref1" name="pref1" style="width:100%">
    <option value=""> Select Campus Preference 1 </option>
    <option value="N"> N </option>
    <option value="O"> O </option>
    <option value="R"> R </option>
    <option value="S"> S </option>
    </select>
    <label id="pref1-error" class="error" for="pref1"></label>
</div>
.
.
.

我当前的js:

$('select[name*="pref"]').change(function(){

    // start by setting everything to enabled
    $('select[name*="pref"] option').prop('disabled',false);

    // loop each select and set the selected value to disabled in all other selects
    $('select[name*="pref"]').each(function(){ 
        var $this = $(this);
        $('select[name*="pref"]').not($this).find('option').each(function(){
           if($(this).attr('value') == $this.val()){            
               $(this).prop('disabled',true);               
           }
        });
    });

});

您可以在禁用它后重新初始化选择,使用以下代码

$("select").select2("destroy").select2();

就像是

$('select[name*="pref"]').change(function(){

    // start by setting everything to enabled
    $('select[name*="pref"] option').prop('disabled',false);

    // loop each select and set the selected value to disabled in all other selects
    $('select[name*="pref"]').each(function(){ 
        var $this = $(this);
        $('select[name*="pref"]').not($this).find('option').each(function(){
           if($(this).attr('value') == $this.val()){            
               $(this).prop('disabled',true);               
           }
        });
    });
    $('select[name*="pref"]').select2("destroy").select2();
});

希望我的理解是对的

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何禁用 select2 中的选项 的相关文章

  • 如何让我的“点击”功能与 iOS 配合使用

    我有一组充当按钮的 Div 这些按钮有一个简单的 jquery click 函数 该函数适用于除 iOS 之外的所有浏览器 例如 div class button click me div and button click function
  • 如何隐藏 URL 中的 ID

    我以前在 Stack Overflow 上见过这类问题 但没有一个真正有帮助 我也用谷歌搜索过 但没有骰子 我想知道如果用户单击选项卡本身是否可以隐藏 URL 中的 ID 这是网页 www planet nu dev new experia
  • jQuery 提交未触发

    我觉得问这个很愚蠢 但为什么我的 submit 没有发出警报 HTML div class buttonbar style margin left 10 div
  • 启动 jQuery UI 选项卡,没有选项卡处于活动状态且所有面板都隐藏

    我在用着jQuery UI 选项卡 http jqueryui com tabs 在一个项目中 我想知道是否有一种简单的方法可以在文档加载时隐藏所有面板 直到单击选项卡为止 默认情况下 jQuery UI 以激活的选项卡和可见的相应面板开始
  • 如何使用javascript通过类名更改html元素的值

    这是我用来更改 html 元素值的代码 a class classname href Vtech com This text to be chnage a 如何在页面加载瞬间更改此文本 看来你需要添加DOMContentLoaded或者把你
  • jquery 在元素之间包裹内容

    我有一些内容由 hr 标记 我需要做的是将开始标记和结束标记之间的所有内容包装起来 鉴于此标记 hr class begin some content
  • jQuery .nothas?

    有没有办法做相当于 nothas jQuery 中的选择器 例如 如果我想添加一个TBODY to all TABLE如果元素还没有 那么最好做这样的事情 TABLE nothas TBODY append tbody tbody 如果这可
  • 动态添加 href 到链接

    我有一系列水平 div 框 我需要添加相关的 href 以使用锚链接链接到下一个 由于它们是动态生成的 我需要使用 JavaScript 添加 href 期望的效果将是 div a class next video href post2 N
  • 非文本区域元素的选择开始

    element 0 selectionStart似乎只适用于文本区域 非文本区域有替代方案吗 我试图将字符串包装在标签中的 DOM 元素中 粗体 斜体 另外 如何解开包装纸 这是一个棘手的领域 你需要选择 https developer m
  • 如何通过 $.ajax (serialize() + extra data) 添加数据,如下所示

    我想在使用 myForm serialize 额外数据后添加额外数据 ajax type POST url myForm attr action data myForm serialize I WANT TO ADD EXTRA DATA
  • iFrame 中的 Javascript iPhone 滚动效果 / Javascript 鼠标加速

    我正在尝试使用 JavaScript 在窗口中重新创建 iPhone 轻拂 滚动事件 从 JQuery 开始 我使用计时器测量单击 拖动 释放事件期间鼠标的加速度和偏移量 var MouseY init function context v
  • 如何允许点击穿过 div 但仍然对悬停做出反应?

    说我有divA部分重叠的divB 我怎样才能允许点击divA穿过去divB但仍然有hover悬停时触发divA 我知道pointer events none 这使得点击通过 但也阻止了悬停 我也尝试过以下方法 但它不允许点击失败 docum
  • 从 JavaScript 重新启动动画 GIF,无需重新加载图像

    我正在使用动画 GIF 创建动画幻灯片 我正在从一个动画淡入淡出到下一个动画 问题是 我发现确保 GIF 从第一帧开始动画的唯一方法是每次显示时重新加载它 每个 GIF 大约 200KB 这对于连续幻灯片播放来说带宽太大了 这是我当前的代码
  • 在 d3 中应用转换时出现错误

    我正在尝试对我在 d3 中设计的条形图应用一些过渡效果 这是我的代码 svg selectAll bar data data enter append g attr class bar append rect attr rx barRadi
  • Jquery:排除元素

    我有以下代码 document ready function a rel each function this qtip content text img class middle src i icon processing gif alt
  • 检索受“rowspan”影响的行的列索引的最有效方法是什么?

    考虑下表 table thead tr th th th A th th B th th C th tr thead tbody tr th 1 th td Apples td td Oranges td td Pears td tr tb
  • 为什么 Firefox 3.6 改变了 jQuery 和 CSS 属性?

    为什么 Firefox 3 6 改变了 jQuery 和 CSS 属性 好吧 更具体一点 我有一个交叉淡入淡出插件 可以在放置在彼此之上的两个图像之间创建发光效果 该函数 如下所示 将使顶部图像在悬停时在 200 毫秒内转换为不透明度 0
  • jPlayer 无法在 Firefox 中播放 mp3

    我正在集成 jplayer 来播放由使用 jQuery 的单击事件触发的精选 mp3 文件 用于实现此目的的代码是 play link click function jquery jplayer 1 jPlayer destroy srcF
  • 使标签充当输入按钮

    我怎样才能做一个 a href http test com tag test Test a 就像表单按钮一样 通过充当表单按钮 我的意思是 当单击链接执行操作时method get 或 post 以便能够通过 get 或 post 捕获它
  • 更改 jQuery UI 选项卡的选定选项卡

    这个问题之前已经被问过几次了 但没有一个与我的情况相似 我有 jQuery Tabs 控件 可以通过 ajax 加载我的选项卡 div ul li a href gt Information a li ul div

随机推荐