互斥选择/下拉菜单

Question

I am trying to create mutually exclusive dropdowns using JS.

Only one OS can be selected from these 4: image

When one is selected, the others should be disabled.

HTML part:

<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>

Asking for help for the JS part.

UPDATE: Perhaps, I misled everyone by saying "others should be disabled". Naturally, it should be possible to select any of the values but in such a way that only one is selected at all times. For instance: currently, I select Red Hat > 7 and the others get disabled. But now if I want to select Oracle Linux > 7, I should be allowed to do so. Meaning that the other dropdowns should "reset" to "Select version"

Answer 1

This can be done by listening to the change event of the <select> elements then utilizing jQuery not() to target other <select> elements:

$(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);
    }
  });
});

Here is a jsfiddle demonstrating the functionality.

As the first <option> of each select is disabled due to HTML disabled property you have in your provided markup, once they have been disabled they will remain that way.

If you remove the disabled property on the default/first <option> of each <select> you can easily build functionality to re-enable other dropdowns if the user selects this default/first option in case they change their mind. Here is the 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);
    }
  });
});

Hopefully this helps!

Answer 2

Add function to each select box and onchange call function to disable rest of select elements

 function selectThis(obj){ var selectelems=document.getElementsByTagName('select') for(var i=0;i<selectelems.length;i++){ if(selectelems[i]!=obj){ 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> 

Answer 3

use this

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