javascript - 自动更改并禁用另一个 radio 字段中的较小值

Question

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

当用户单击 option-1 中的值时，必须禁用 option-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>

jsFiddle demo

Answer 1

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

您应该更改您的代码:

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