2017-05-05 5 views
2

select2でユーザーの好みを取りたいと思っています。 1つのオプションを選択すると、他のselect2のオプションは無効になります。select2でオプションを無効にする方法

サンプル:

嗜好1: オプション1 オプション2 オプション3 オプション4

嗜好2: オプション1 オプション2 オプション3 オプション4

嗜好3 : オプション1 オプション2 オプション3 オプション4

嗜好4: オプション1オプション2オプション3 オプション4

Iが優先1にオプション1を選択した場合、それは優先1,2,3,4 およびI場合に無効にする必要がありますオプション2を優先2で選択してください。優先度1,2,3,4 で無効にする必要があります。優先3でオプション3を選択すると、優先度1,2,3,4で無効にする必要があります。1,2,3,4

また、優先順位2の場合は優先度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);    
      } 
     }); 
    }); 

}); 

答えて

3

あなたがコード

$("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(); 
}); 
のようなもの、次のことが使用不能にした後、選択再初期化することができます

右、私はあなたが右

+0

はあなたに@Vamshi –

+0

を取得していない午前取得しています。しかし、一度すべての4つのオプションが設定されている希望は、すべてが無効になり、オプションをリセットする手段がありませんか?ページリフレッシュを除きます。ユーザーが設定を変更したい場合は、それを行うにはどうすればよいでしょうか? – Vamshi

+0

@ Vamshiあなたはすべてのオプションを有効にするリセットの環境設定と呼ばれるボタンを置くことができました –

関連する問題