互斥選擇/下拉

Question

我想創建使用JS的互斥下拉列表。

只有一個OS可以從這些4中選擇：image

當選擇之一，其他應禁用。

HTML部分：

<table id="table_os" class="table table-bordered"> 
<tbody> 
<tr> 
    <td class="text-center"> 
     <div><img src="distro-redhat.png"></div> 
     <div><h6><span class="semi-bold">Red Hat Linux</span></h6></div> 
     <select class="form-control" style="text-align-last: center;"> 
      <option value="" selected disabled>Select version</option> 
      <option value="rhel7">7 (latest) </option> 
     </select> 
    </td> 
    <td class="text-center"> 
     <div><img src="oel.png"></div> 
     <div><h6><span class="semi-bold">Oracle Linux</span></h6></div> 
     <select class="form-control" style="text-align-last: center;"> 
      <option value="" selected disabled>Select version</option> 
      <option value="oel7">7 (latest)</option> 
     </select> 
    </td> 
    <td class="text-center"> 
     <div><img src="centos.png"></div> 
     <div><h6><span class="semi-bold">CentOS Linux</span></h6></div> 
     <select class="form-control" style="text-align-last: center;"> 
      <option value="" selected disabled>Select version</option> 
      <option value="centos7">7 (latest)</option> 
     </select> 
    </td> 
    <td class="text-center"> 
     <div><img src="windows.png"></div> 
     <div><h6><span class="semi-bold">Microsoft Windows</span></h6></div> 
     <select class="form-control" style="text-align-last: center;"> 
      <option value="" selected disabled>Select version</option> 
      <option value="win2012r2">Standard 2012 R2</option> 
     </select> 
    </td> 
</tr> 
</tbody> 

問計於JS部分幫助。

更新：也許，我誤導了所有人說「別人應該被禁用」。當然，應該有可能選擇任何一個值，但這樣只能選擇一個值。例如：目前，我選擇紅帽> 7，其他人被禁用。但是現在如果我想選擇Oracle Linux> 7，我應該允許這麼做。這意味着其他的下拉列表中應「復位」到「選擇版本」

Answer 1

這可以通過聽change事件再利用jQuery的not()的<select>元素來完成目標等<select>元素：

$(document).ready(function() { 
    var $table = $('#table_os'); 

    $table.find('select').on('change', function() { 
    var val = $(this).val(); 

    if (val !== '') { 
     $(this).closest('tr').find('select').not($(this)).prop('disabled', true); 
    } 
    }); 
}); 

這裏是一個jsfiddle演示功能。

由於您在提供的標記中包含HTML disabled屬性，因此每個選擇的第一個<option>被禁用，一旦它們被禁用，它們將保持這種狀態。

如果刪除的默認disabled屬性/每<select>您可以輕鬆地構建功能，如果用戶在選擇的情況下此默認/第一個選項，以重新啓用其他的下拉列表中的第一個<option>他們改變主意。這裏是jsfiddle：

$(document).ready(function(){ 
    var $table = $('#table_os') 

    $table.find('select').on('change', function(){ 
    var val = $(this).val(); 

    var $otherSelects = $(this).closest('tr').find('select').not($(this)); 

    if(val !== '') { 
     $otherSelects.prop('disabled', true); 
    } 
    else { 
     $otherSelects.prop('disabled', false); 
    } 
    }); 
}); 

希望這有助於！

Answer 2

使用本

$('select').on('change',function(){ 
    $(this).parents('tr').siblings('tr').find('select').not($(this)).prop('disabled', true); 
}); 

Answer 3

添加功能，每個選擇框，onchange通話功能禁用選擇元素

function selectThis(obj){ 
 
var selectelems=document.getElementsByTagName('select') 
 
for(var i=0;i<selectelems.length;i++){ 
 
\t if(selectelems[i]!=obj){ 
 
    \t \t selectelems[i].setAttribute('disabled','true') 
 
    } 
 
} 
 
}

<table id="table_os" class="table table-bordered"> 
 
<tbody> 
 
<tr> 
 
    <td class="text-center"> 
 
     <div><img src="https://www.haskell.org/platform/img/distro-redhat.svg" width="60px"></div> 
 
     <div><h6><span class="semi-bold">Red Hat Linux</span></h6></div> 
 
     <select class="form-control" style="text-align-last: center;" onchange="selectThis(this)"> 
 
      <option value="" selected >Select version</option> 
 
      <option value="rhel7">7 (latest) </option> 
 
     </select> 
 
    </td> 
 
    <td class="text-center"> 
 
     <div><img src="http://austinlinux.com/local/Oracle%20Linux.jpg" width="51px"></div> 
 
     <div><h6><span class="semi-bold">Oracle Linux</span></h6></div> 
 
     <select class="form-control" style="text-align-last: center;" onchange="selectThis(this)"> 
 
      <option value="" selected >Select version</option> 
 
      <option value="oel7">7 (latest)</option> 
 
     </select> 
 
    </td> 
 
    <td class="text-center"> 
 
     <div><img src="http://seeklogo.com/images/C/centos-logo-494F57D973-seeklogo.com.png" width="60px"></div> 
 
     <div><h6><span class="semi-bold">CentOS Linux</span></h6></div> 
 
     <select class="form-control" style="text-align-last: center;" onchange="selectThis(this)"> 
 
      <option value="" selected >Select version</option> 
 
      <option value="centos7">7 (latest)</option> 
 
     </select> 
 
    </td> 
 
    <td class="text-center"> 
 
     <div><img src="https://images.seeklogo.net/2012/12/windows-8-icon-logo-vector-400x400.png" width="60px"></div> 
 
     <div><h6><span class="semi-bold">Microsoft Windows</span></h6></div> 
 
     <select class="form-control" style="text-align-last: center;" onchange="selectThis(this)"> 
 
      <option value="" selected >Select version</option> 
 
      <option value="win2012r2">Standard 2012 R2</option> 
 
     </select> 
 
    </td> 
 
</tr> 
 
</tbody>