Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to disable multiple select tag when selecting one?

Tags:

javascript

jquery

css

twitter-bootstrap

I have three select tags with values in it. If I select Unlimited in one of the values I want the rest of the two select tags to auto-switch to the same value (Unlimited) and gets disabled.

If I select the option Unlimited from the first select tag the second and thirds value should switch to Unlimited and inputs should get disabled.

If I select the middle option (2nd option) the first select tag and third select tag's value should auto-select to Unlimited and both input fields should get disabled.

Likewise, if I select Unlimited from the last select tag, the first and second should auto-switch to Unlimited and both input fields should get disabled.

Is this possible to do it via pure CSS? If not, how do I achieve it?

<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="row mb-3">
	<div class="col-12 col-md-4 col-lg-3 mb-3">
		<label>Distance per day</label>
		<select id="distancePerDay" class="form-control custom-select">
			<option value="100">100</option>
			<option value="150" selected="selected">150</option>
			<option value="200">200</option>
			<option value="250">250</option>
			<option value="300">300</option>
			<option value="350">350</option>
			<option value="400">400</option>
			<option value="Unlimited">Unlimited</option>
		</select>
	</div>
	<div class="col-12 col-md-4 col-lg-3 mb-3">
		<label>Distance per week</label>
		<select id="distancePerWeek" class="form-control custom-select">
			<option value="700">700</option>
			<option value="950" selected="selected">950</option>
			<option value="1200">1200</option>
			<option value="1450">1450</option>
			<option value="1700">1700</option>
			<option value="1950">1950</option>
			<option value="2200">2200</option>
			<option value="Unlimited" >Unlimited</option>
		</select>
	</div>
	<div class="col-12 col-md-4 col-lg-3 mb-3">
		<label>Distance per month</label>
		<select id="distancePerMonth" class="form-control custom-select">
			<option value="1500">1500</option>
			<option value="1850">1850</option>
			<option value="2250">2250</option>
			<option value="2600">2600</option>
			<option value="2950">2950</option>
			<option value="3300">3300</option>
			<option value="3650">3650</option>
			<option value="Unlimited">Unlimited</option>
		</select>
	</div>
</div>
like image 225
Robinhood Avatar asked Sep 22 '19 23:09

Robinhood

3 Answers

Hi you could do that with javascript, I created validate function and added onchange="validate(event)" in each select like so:

const validate = event => {
         
  const dropdowns = ['distancePerDay','distancePerWeek','distancePerMonth'];
  const dropdownsToUpdate = dropdowns.filter(x => x !== event.target.id);
         
  for(let i = 0; i < dropdownsToUpdate.length; i++){    
    const item = document.getElementById(dropdownsToUpdate[i]);
    
    if(event.target.value === 'Unlimited'){
      item.value = 'Unlimited';
      item.setAttribute('disabled', '');     
    }
    else {      
      item.removeAttribute('disabled'); 
    }
  }  
}
<div>
    <label>Distance per day</label>
	<select id="distancePerDay" onchange="validate(event)">
		<option value="100">100</option>
		<option value="150" selected="selected">150</option>
		<option value="200">200</option>
		<option value="250">250</option>
		<option value="300">300</option>
		<option value="350">350</option>
		<option value="400">400</option>
		<option value="Unlimited">Unlimited</option>
	</select>
</div>
<div>
	<label>Distance per week</label>
	<select id="distancePerWeek" onchange="validate(event)">
		<option value="700">700</option>
		<option value="950" selected="selected">950</option>
		<option value="1200">1200</option>
		<option value="1450">1450</option>
		<option value="1700">1700</option>
		<option value="1950">1950</option>
		<option value="2200">2200</option>
		<option value="Unlimited" >Unlimited</option>
	</select>
</div>
<div>
	<label>Distance per month</label>
	<select id="distancePerMonth" onchange="validate(event)">
		<option value="1500">1500</option>
		<option value="1850">1850</option>
		<option value="2250">2250</option>
		<option value="2600">2600</option>
		<option value="2950">2950</option>
		<option value="3300">3300</option>
		<option value="3650">3650</option>
		<option value="Unlimited">Unlimited</option>
	</select>
</div>
like image 186
rcoro Avatar answered Nov 15 '22 00:11

rcoro

I am storing the last known value in a custom attribute last in the element before all items were marked Unlimited. When changed to not unlimited it will remember the last known value of each select element and restore it.

If you are looking for a jQuery solution, You add change event listeners to all select elements and if there is any element who has 'Unlimited' as values filter the selects w/o the current element and assign property disabled if 'Unlimited' is selected

$('select').on('change', function(e){
  const isUnlimited = $(this).val() === 'Unlimited';
  $('select')
    .not(this)
    .prop({disabled: isUnlimited})
    .attr('last', function(i,v){ return isUnlimited ? $(this).val() : v; })
    .val(function(i,v){ return isUnlimited ? 'Unlimited' : v === 'Unlimited' ? $(this).attr('last') : v; });
});

And using jQuery ensures you write less do more. Snippet attached below.

$('select').on('change', function(e){
  const isUnlimited = $(this).val() === 'Unlimited';
  $('select')
    .not(this)
    .prop({disabled: isUnlimited})
    .attr('last', function(i,v){return isUnlimited ? $(this).val() : v;})
    .val(function(i,v){return isUnlimited ? 'Unlimited' : v === 'Unlimited' ? $(this).attr('last') : v; });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="row mb-3">
  <div class="col-12 col-md-4 col-lg-3 mb-3">
    <label>Distance per day</label>
    <select id="distancePerDay" class="form-control custom-select">
      <option value="100">100</option>
      <option value="150" selected="selected">150</option>
      <option value="200">200</option>
      <option value="250">250</option>
      <option value="300">300</option>
      <option value="350">350</option>
      <option value="400">400</option>
      <option value="Unlimited">Unlimited</option>
    </select>
  </div>
  <div class="col-12 col-md-4 col-lg-3 mb-3">
    <label>Distance per week</label>
    <select id="distancePerWeek" class="form-control custom-select">
      <option value="700">700</option>
      <option value="950" selected="selected">950</option>
      <option value="1200">1200</option>
      <option value="1450">1450</option>
      <option value="1700">1700</option>
      <option value="1950">1950</option>
      <option value="2200">2200</option>
      <option value="Unlimited">Unlimited</option>
    </select>
  </div>
  <div class="col-12 col-md-4 col-lg-3 mb-3">
    <label>Distance per month</label>
    <select id="distancePerMonth" class="form-control custom-select">
      <option value="1500">1500</option>
      <option value="1850">1850</option>
      <option value="2250">2250</option>
      <option value="2600">2600</option>
      <option value="2950">2950</option>
      <option value="3300">3300</option>
      <option value="3650">3650</option>
      <option value="Unlimited">Unlimited</option>
    </select>
  </div>
</div>
like image 34
joyBlanks Avatar answered Nov 14 '22 23:11

joyBlanks

Pure JS (why jQuery?)

I made a change : if the select with 'Unlimited' is changed again, the 2 other are not disabled any more, and get their ancient value before to be disabled

Second solution, with persistents values in a dataset value:

const threeSelects =  document.querySelectorAll('select')
    , C_Unlimited  = 'Unlimited'

threeSelects.forEach(Slc=>{
  Slc.dataset.val = Slc.value
  Slc.onchange=e=>{
    let isDisabled  = (Slc.value===C_Unlimited)
    Slc.dataset.val = Slc.value
    threeSelects.forEach(Sx=>{
      if(Sx!==Slc) Sx.value = (Sx.disabled=isDisabled)? C_Unlimited: Sx.dataset.val
    })
  }
})


const threeSelects =  document.querySelectorAll('select')
    , C_Unlimited  = 'Unlimited'

threeSelects.forEach(Slc=>{
  Slc.dataset.val = Slc.value
  Slc.onchange=e=>{
    let isDisabled  = (Slc.value===C_Unlimited)
    Slc.dataset.val = Slc.value
    threeSelects.forEach(Sx=>{
      if(Sx!==Slc) Sx.value = (Sx.disabled=isDisabled)? C_Unlimited: Sx.dataset.val
    })
  }
})
.col-12 { display:inline-block; padding:.5em }
label, select { float:left;clear:both }
<div class="row mb-3">
  <div class="col-12 col-md-4 col-lg-3 mb-3">
    <label>Distance per day</label>
    <select id="distancePerDay" class="form-control custom-select">
      <option value="100">100</option>
      <option value="150" selected="selected">150</option>
      <option value="200">200</option>
      <option value="250">250</option>
      <option value="300">300</option>
      <option value="350">350</option>
      <option value="400">400</option>
      <option value="Unlimited">Unlimited</option>
    </select>
  </div>
  <div class="col-12 col-md-4 col-lg-3 mb-3">
    <label>Distance per week</label>
    <select id="distancePerWeek" class="form-control custom-select">
      <option value="700">700</option>
      <option value="950" selected="selected">950</option>
      <option value="1200">1200</option>
      <option value="1450">1450</option>
      <option value="1700">1700</option>
      <option value="1950">1950</option>
      <option value="2200">2200</option>
      <option value="Unlimited">Unlimited</option>
    </select>
  </div>
  <div class="col-12 col-md-4 col-lg-3 mb-3">
    <label>Distance per month</label>
    <select id="distancePerMonth" class="form-control custom-select">
      <option value="1500">1500</option>
      <option value="1850">1850</option>
      <option value="2250">2250</option>
      <option value="2600">2600</option>
      <option value="2950">2950</option>
      <option value="3300">3300</option>
      <option value="3650">3650</option>
      <option value="Unlimited">Unlimited</option>
    </select>
  </div>
</div>

First solution, with persistents values in a JS table:

const threeSelects = Array
                      .from(document.querySelectorAll('#distancePerDay, #distancePerWeek, #distancePerMonth '))
                      .map(sx => ({ sel: sx, val: sx.value }))
    , C_Unlimited  = 'Unlimited'

threeSelects.forEach(eSchg => { eSchg.sel.onchange = e => {
  eSchg.val = eSchg.sel.value

  threeSelects.forEach(eSx => {
    if (eSx.sel !== eSchg.sel) {
      if (eSchg.sel.value === C_Unlimited) {
        eSx.sel.value = C_Unlimited
        eSx.sel.disabled = true
      }
      else if (eSx.sel.value === C_Unlimited) {
        eSx.sel.value = eSx.val
        eSx.sel.disabled = false
      }
    }
  })
} })
.col-12 { display:inline-block; padding:.5em }
label, select { float:left;clear:both }
<div class="row mb-3">
  <div class="col-12 col-md-4 col-lg-3 mb-3">
    <label>Distance per day</label>
    <select id="distancePerDay" class="form-control custom-select">
      <option value="100">100</option>
      <option value="150" selected="selected">150</option>
      <option value="200">200</option>
      <option value="250">250</option>
      <option value="300">300</option>
      <option value="350">350</option>
      <option value="400">400</option>
      <option value="Unlimited">Unlimited</option>
    </select>
  </div>
  <div class="col-12 col-md-4 col-lg-3 mb-3">
    <label>Distance per week</label>
    <select id="distancePerWeek" class="form-control custom-select">
      <option value="700">700</option>
      <option value="950" selected="selected">950</option>
      <option value="1200">1200</option>
      <option value="1450">1450</option>
      <option value="1700">1700</option>
      <option value="1950">1950</option>
      <option value="2200">2200</option>
      <option value="Unlimited">Unlimited</option>
    </select>
  </div>
  <div class="col-12 col-md-4 col-lg-3 mb-3">
    <label>Distance per month</label>
    <select id="distancePerMonth" class="form-control custom-select">
      <option value="1500">1500</option>
      <option value="1850">1850</option>
      <option value="2250">2250</option>
      <option value="2600">2600</option>
      <option value="2950">2950</option>
      <option value="3300">3300</option>
      <option value="3650">3650</option>
      <option value="Unlimited">Unlimited</option>
    </select>
  </div>
</div>
like image 40
Mister Jojo Avatar answered Nov 14 '22 22:11

Mister Jojo
Sign in to Comment

Related questions

Difference between npm t and npm run test
React - Ant Design, Form with getFieldDecorator and initialValue not working in single chechbox
vuetify table page is not working and reset back to 1
console.log avoid maximum call stack
How to embed a youtube playlist with a sidebar
await work in chrome console without async wrapper [closed]
How can I control the order of CSS with MiniCssExtractPlugin?
Binary Search in an array corner case
Vue.js destroy a setInterval running inside a component
How to send array of objects with keys to API?
Angular: disable material button with directive doesn't works
What are the downsides of using a simple regex-based markdown parser?
res.clearCookie function doesn't delete cookies
Reading local Excel file with js-xlsx using Angular 12?
How to remove an unwanted gap with position: sticky
How does Angular Component CSS encapsulation work?
How do I get jest to to work with ES6 dependencies
Access to React state with Puppeteer
Angular 7 | HostListener blur conditional stop all other event callbacks
How to find a DOM element by its text content?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!