Как отключить множественный выбор тега при выборе одного? - PullRequest
Новая
       1

Как отключить множественный выбор тега при выборе одного?

5 голосов
/ 23 сентября 2019

У меня есть три тега выбора со значениями в нем.Если я выберу Неограниченно в одном из значений, я хочу, чтобы остальные два тега выбора автоматически переключились на одно и то же значение (Неограниченно) и отключились.

Если я выберу опцию Неограниченно из первого тега выборавторое и третье значения должны переключиться на Неограниченно, а входы должны быть отключены.

Если я выберу среднюю опцию (2-й вариант), первый тег выбора и значение третьего выбранного тега должны автоматически выбрать Неограниченное и оба поля вводадолжно отключиться.

Аналогично, если я выберу Неограниченный из последнего тега выбора, первое и второе должны автоматически переключиться на Неограниченное, и оба поля ввода должны быть отключены.

Возможно ли этосделать это с помощью чистого CSS?Если нет, то как мне этого добиться? 

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

Ответы [ 4 ]

3 голосов
/ 23 сентября 2019

Вы можете сделать это с помощью JavaScript, я создал validate функцию и добавил onchange="validate(event)" в каждый select, например: 

const validate = event => {
       
  const id = event.target.id;      
  const dropdowns = ['distancePerDay','distancePerWeek','distancePerMonth'];
  const dropdownsToUpdate = dropdowns.filter(x => x !== 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>
	<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>
</div>
2 голосов
/ 23 сентября 2019

Pure JS (почему jQuery?)

Я внес изменение: если снова изменить выбор с «Unlimited», остальные 2 больше не отключаются, и получают свое древнее значение, прежде чем быть отключенным

Второе решение с постоянными значениями в наборе данных: 

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>

Первое решение с постоянными значениями в таблице JS: 

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>
1 голос
/ 23 сентября 2019

Я храню последнее известное значение в пользовательском атрибуте last в элементе до того, как все элементы были помечены как Неограниченные.При изменении на не неограниченное, он запомнит последнее известное значение каждого элемента select и восстановит его.

Если вы ищете решение jQuery, вы добавляете прослушиватели события изменения для всех элементов select и, если есть какой-либо элементУ которого в качестве значений «Unlimited» отфильтровывается, выбирает без текущего элемента и назначает свойство отключенным, если выбрано «Unlimited» 

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

. А использование jQuery гарантирует, что вы пишете меньше, делайте больше.Фрагмент прилагается ниже. 

$('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>
0 голосов
/ 23 сентября 2019

Вы можете сделать это легко с помощью jquery, с not().

Вы также можете использовать .prop('selectedIndex',0); для сброса <select>, когда вы выбираете другой вариант на «Неограниченный»: 

$( "select" ).on( "change", function() {
    var sw = $(this).val() == "Unlimited";
    var others = $('select').not(this).prop('disabled', sw);
    sw ? others.val("Unlimited") : others.val()=="Unlimited" ? others.prop('selectedIndex',0) : 0;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...