选择一个时如何禁用多个选择标签？

Question

我有三个带有值的选择标签。如果我在其中一个值中选择“无限”，则我希望两个选择标签中的其余标签自动切换到相同的值（“无限”）并被禁用。

如果我从第一个选择标签中选择了Unlimited选项，则第二个和第三个值应切换为Unlimited，并且输入应被禁用。

如果我选择中间选项（第二个选项），则第一个选择标签和第三个选择标签的值应自动选择为“无限”，并且两个输入字段都应被禁用。

同样，如果我从最后一个选择标记中选择了Unlimited，则第一个和第二个应该自动切换到Unlimited，并且两个输入字段都将被禁用。

是否可以通过纯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>

Answer 1

last在所有项目都标记为“无限制”之前，我将最后一个已知值存储在元素的自定义属性中。当更改为非无限时，它将记住每个选择元素的最后一个已知值并恢复它。

如果您正在寻找 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; });
});

使用 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; });
});

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