CODEWITHSUNDEEP
javascripthtml
Riddhi Dua
Riddhi Dua

Reputation: 91

How to add disable the other dropdowns when a value is selected in one dropdown

So I have multiple dropdowns on my page and i want to create a method, that if a value is selected in one dropdown, the other dropdown disables, which is no value can be selected in the other dropdown and it becomes grey and vice versa. MY HTML is :

<div id="list1" class="dropdown-check-list" tabindex="1">
      <span class="anchor" onclick="getElements(list1)">Select Months</span>
      <ul id="list1_items" class="items" name="month">
        <li><input type="checkbox" name="month" value="Apr-2021">April </li>
        <li><input type="checkbox" name="month" value="May-2021">May </li>
        <li><input type="checkbox" name="month" value="Jun-2021">June </li>
        <li><input type="checkbox" name="month" value="Jul-2021">July</li>
        <li><input type="checkbox" name="month" value="Aug-2021">August</li>
        <li><input type="checkbox" name="month" value="Sep-2021">September</li>
        <li><input type="checkbox" name="month" value="Oct-2021">October</li>
        <li><input type="checkbox" name="month" value="Nov-2021">November</li>
        <li><input type="checkbox" name="month" value="Dec-2021">December</li>
        <li><input type="checkbox" name="month" value="Jan-2021">January </li>
        <li><input type="checkbox" name="month" value="Feb-2021">February</li>
        <li><input type="checkbox" name="month" value="Mar-2021">March </li>
      </ul>
    </div>

    <div id="list2" class="dropdown-check-list" tabindex="100">
      <span class="anchor" onclick="getElements(list2)">Select Quarter</span>
      <ul id="list2_items" class="items" name="quarter">
        <li><input type="checkbox" name="quarter" value="Quarter1">Quarter 1- Apr - Jun</li>
        <li><input type="checkbox" name="quarter" value="Quarter2">Quarter 2- Jul - Sep</li>
        <li><input type="checkbox" name="quarter" value="Quarter3">Quarter 3- Oct - Dec</li>
        <li><input type="checkbox" name="quarter" value="Quarter4">Quarter 4- Jan - Mar </li>
      </ul>
    </div>

If someone could please help me. Thankyou.

Upvotes: 1

Views: 80

Answers (5)

Rajdeep D
Rajdeep D

Reputation: 3900

You can use document.querySelector and document.querySelectorAll and then set disabled property to true

let list1 = new Set();
let list2 = new Set();

document.querySelector('#list1_items').addEventListener('change', e => {
 e.target.checked ? list1.add(e.target.value) : list1.delete(e.target.value); 
  if(list1.size) 
      document.querySelectorAll('#list2_items > li > input').forEach(el => el.disabled = true); 
  else 
      document.querySelectorAll('#list2_items > li > input').forEach(el => el.disabled = false);
});

document.querySelector('#list2_items').addEventListener('change', e => {
 e.target.checked ? list2.add(e.target.value) : list2.delete(e.target.value); 
  if(list2.size) 
     document.querySelectorAll('#list1_items > li > input').forEach(el => el.disabled = true);
  else
    document.querySelectorAll('#list1_items > li > input').forEach(el => el.disabled = false);
});

Here is the codepen

Upvotes: 1

imtinan ahmad
imtinan ahmad

Reputation: 7

 <select id="cat_user">
    <option>select option</option>
    <option value="Super Admin">Super Admin</option>
    <option value="Event Admin">Event Admin</option>
</select>

<select id="event_name">
    <option value="ICT4U">ICT4U</option>
    <option value="Fun Run">Fun Run</option>
</select>`$('#cat_user').change(function () {


    if ($('#cat_user option:selected').text() == "Event Admin") {
        $('#event_name').prop('disabled', false);
    }
    else {
        $('#event_name').prop('disabled', true);
    }
});`

Upvotes: 1

caramba
caramba

Reputation: 22480

You can take advantage of the CSS pointer-events: none; after you figured out which <div> is the other one. Something like this:

var listIds = ['list1', 'list2'];
var checkboxes = document.querySelectorAll('.items input[type="checkbox"]');
checkboxes.forEach( checkbox => {
    // every checkbox needs one event listener on change
    checkbox.addEventListener('change', () => {
        // if the checkbox is clicked run the following code...
        // remove this checkbox div id from the list of IDs
        listIds = listIds.filter(e => e !== checkbox.closest('div').id);
        listIds.forEach( id => {
            // add the class "disable" to the remainig div
            document.querySelector(`#${id}`).classList.add('disable')
        });
    });
});
.disable {
  border: solid 2px red;
  pointer-events: none;
}
<div id="list1" class="dropdown-check-list" tabindex="1">
      <!--<span class="anchor" onclick="getElements(&#39;list1&#39;)">Select Months</span>-->
      <ul id="list1_items" class="items" name="month">
        <li><input type="checkbox" name="month" value="Apr-2021">April </li>
        <li><input type="checkbox" name="month" value="May-2021">May </li>
        <li><input type="checkbox" name="month" value="Jun-2021">June </li>
        <li><input type="checkbox" name="month" value="Jul-2021">July</li>
        <li><input type="checkbox" name="month" value="Aug-2021">August</li>
        <li><input type="checkbox" name="month" value="Sep-2021">September</li>
        <li><input type="checkbox" name="month" value="Oct-2021">October</li>
        <li><input type="checkbox" name="month" value="Nov-2021">November</li>
        <li><input type="checkbox" name="month" value="Dec-2021">December</li>
        <li><input type="checkbox" name="month" value="Jan-2021">January </li>
        <li><input type="checkbox" name="month" value="Feb-2021">February</li>
        <li><input type="checkbox" name="month" value="Mar-2021">March </li>
      </ul>
    </div>

    <div id="list2" class="dropdown-check-list" tabindex="100">
      <!--<span class="anchor" onclick="getElements(&#39;list2&#39;)">Select Quarter</span>-->
      <ul id="list2_items" class="items" name="quarter">
        <li><input type="checkbox" name="quarter" value="Quarter1">Quarter 1- Apr - Jun</li>
        <li><input type="checkbox" name="quarter" value="Quarter2">Quarter 2- Jul - Sep</li>
        <li><input type="checkbox" name="quarter" value="Quarter3">Quarter 3- Oct - Dec</li>
        <li><input type="checkbox" name="quarter" value="Quarter4">Quarter 4- Jan - Mar </li>
      </ul>
    </div>

Upvotes: 1

ogie
ogie

Reputation: 1470

If you're using jQuery this is pretty straightforward. Code attached. If not, comment back, but the approach is the same.

  • Give all your selects the same class name.

<select class="selectClass">
        <option value="test1">test1</option>
        <option value="test11">test11</option>
        <option value="test111">test111</option>
    </select>
    <select class="selectClass">
        <option value="test2">test2</option>
        <option value="test22">test22</option>
        <option value="test222">test222</option>
    </select>
    <select class="selectClass">
        <option value="test3">test3</option>
        <option value="test33">test33</option>
        <option value="test333">test333</option>
    </select>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function () {
            $(".selectClass").on('change', function () {
                $(".selectClass").not($(this)).prop("disabled", "disabled")
            })
        })
    </script>

Upvotes: 2

Nitheesh
Nitheesh

Reputation: 19986

Try something like this.

const genderDD = document.getElementById('gender-dd');
const countryDD = document.getElementById('country-dd');

genderDD.onchange = function(ev) {
  const gender = ev.target.value;
  countryDD.disabled = gender ? true : false;
}

countryDD.onchange = function(ev) {
  const conuntry = ev.target.value;
  genderDD.disabled = conuntry ? true : false;
}
<select name="" id="country-dd">
  <option value="">Please Select Country</option>
  <option value="india">India</option>
  <option value="pak">Pak</option>
  <option value="srilanka">Srilanka</option>
</select>

<select name="" id="gender-dd">
  <option value="">Please Select Gender</option>
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>

Upvotes: 1

Related Questions