自动更改和禁用另一个单选字段中的较小值

Question

我正在尝试创建一个相当复杂的场景。我只是一个尝试学习javascript的新手。

当用户单击选项 1 中的值时，必须禁用选项 2 中的较小值并将其移动到较高的值。例如，如果用户在选项 1 中选择15，则必须在选项 2 中禁用10和15。然后，它必须自动将所选值移动到20。

请注意，如果用户在选项 1 中选择5，他/她可以在选项 2 中选择任何更高的值。

$('#option1 :radio').on('change', function() {
document.getElementById("value1").value = $(this).val();
document.getElementById("value2").value = $(this).val();
});
$('#option2 :radio').on('change', function() {
document.getElementById("value11").value = $(this).val();
document.getElementById("value12").value = $(this).val();
});

.container {
margin-top: 30px;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<h6>Option 1</h6>
<div id="option1" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-primary w-100 active">
<input type="radio" name="options" value="5" id="option" autocomplete="off"> 5</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="10" id="option" autocomplete="off"> 10</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="15" id="option" autocomplete="off"> 15</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="20"id="option" autocomplete="off"> 20</label>
</div>
</div>
<div class="container">
<div class="form-group">
<input id="value1" value="5" class="form-control">
</div>
<div class="form-group">
<input id="value2" value="5" class="form-control">
</div>
</div>
<hr />
<div class="container">
<h6>Option 2</h6>
<div id="option2" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-primary w-100 active">
<input type="radio" name="options" value="10" id="option" autocomplete="off"> 10</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="15" id="option" autocomplete="off"> 15</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="20" id="option" autocomplete="off"> 20</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="25"id="option" autocomplete="off"> 25</label>
</div>
</div>
<div class="container">
<div class="form-group">
<input id="value11" value="10" class="form-control">
</div>
<div class="form-group">
<input id="value12" value="10" class="form-control">
</div>
</div>

js小提琴演示

Answer 1

您需要在change事件中为option1元素添加一个条件，在该条件中，它获取当前值并将其与option2中的值进行比较，然后将 disable 属性添加到小于所选值的值。

您应该从中更改代码：

$('#option1 :radio').on('change', function() {
document.getElementById("value1").value = $(this).val();
document.getElementById("value2").value = $(this).val();
});

对此：

$('#option1 :radio').on('change', function() {
document.getElementById("value1").value = $(this).val();
document.getElementById("value2").value = $(this).val();
var baseValue = parseInt($(this).val());
var option2List = $('#option2 :radio').filter(function() {
return parseInt($(this).val()) <= baseValue; //getting only the values lesser to the current and equal to it
});
$('#option2 :radio').removeAttr('disabled');//resetting the option2
$('#option2 label').removeClass('disabled');//resetting the labels 
option2List.prop('disabled', 'disabled'); //disabling the lesser values
//below code adds the disabled class to the labels  
$.each(option2List,function(){
$(this).closest('label').addClass('disabled');
});
$('#option2 :radio:enabled').first().click();//selects the first enabled element
});