HTML，多選框，選擇禁用

我在html中有多個select框。我正在使用jQuery chosen插件使選擇框更加用戶友好。我希望能夠實現以下功能，但我不知道如何去做。原諒我，我對HTML很陌生。HTML，多選框，選擇禁用

我希望當用戶從選項列表中選擇「任何」時，該框不允許任何其他輸入（即變成單選）。

同樣，當用戶輸入除「任何」以外的任何其他選項時，我希望「任何」被禁用。

因此，例如，我有以下選項的多select框：

任何
德國
法國
美國
沙特阿拉伯

所以基本上用戶可以選擇一些組合德國，法國，美國和沙特阿拉伯，但不包括「任何」選項，或者他們可以選擇「任何」而不是其他任何東西。

來源

2015-04-23 szadeklord

如果選擇了「任何」，則可以取消選擇所有其他選定的項目。如果選擇了其中一個國家，則可以取消選擇「任何」。 – derMrich

你能提供一些代碼嗎？ – Outpox

試試這個：

<select id='country'> 
    <option> </option> 
    <option id='any' value='any'>Any</option> 
    <option id='germany' value='germany'>Germany</option> 
    <option id='france' value='france'>France</option> 
    <option id='usa' value='usa'>USA</option> 
</select> 



    $(document).ready(function() { 
    $("#country").change(function() { 
    if ($(this).val() == 'any') { 
     $('#germany').attr("disabled", "disabled"); 
     $('#france').attr("disabled", "disabled"); 
     $('#usa').attr("disabled", "disabled"); 
     currentSelect = -1; 
    } else { 
     $('#any').attr("disabled", "disabled"); 
    } 
}); 
});

來源

2015-04-23 13:23:18

嘗試這個 -

var any = false; 
$("select").change(function(){ 
    var str = $("select").val(); 
    var n = str.toString().search("Any,"); 
    if(n==0 && !any){ 
     $("select option[value!='Any']").each(function(){ 
      $(this).attr("selected",false); 
     }); 
     any = !any; 
     $("select option[value='Any']").attr("selected",true); 
    } 
    else if(str.toString().search(",")!=-1){ 
     any = !any; 
     $("select option[value='Any']").attr("selected",false); 
    } 
});

確保你把你的價值「任何」爲多選

來源

2015-04-23 13:52:51 mohit

這裏的任何標籤是一個使用chosen插件的解決方案：

$('.chosen-select').chosen({}); 
 

 
$('.chosen-select').on('change', function(evt, params) { 
 
    var $s = $(this); 
 
    
 
    if (params.selected && params.selected == "Any") { 
 
     // disable the select 
 
     $s.children('option').not(':selected').each(function(){ 
 
      $(this).attr('disabled','disabled'); 
 
     }); 
 
    } 
 
    else if (params.deselected && params.deselected == "Any") { 
 
     // enable back 
 
     $s.children('option').each(function(){ 
 
      $(this).removeAttr('disabled'); 
 
     }); 
 
    } 
 
    // force chosen update 
 
    $('.chosen-select').trigger('chosen:updated'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css"> 
 
    
 
<div> 
 
<select data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4"> 
 
      <option value=""></option> 
 
      <option value="Any">[Any]</option> 
 
      <option value="United States">United States</option> 
 
      <option value="United Kingdom">United Kingdom</option> 
 
      <option value="Afghanistan">Afghanistan</option> 
 
      <option value="Aland Islands">Aland Islands</option> 
 
      <option value="Albania">Albania</option> 
 
      <option value="Algeria">Algeria</option> 
 
      <option value="American Samoa">American Samoa</option> 
 

 
      </select>  
 
</div>

來源

2015-04-23 14:58:38 dekkard

HTML，多選框，選擇禁用

回答

相關問題