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

Question

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

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

请注意，如果用户5在选项 1 中选择，他/她可以在选项 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 演示

标签： javascriptjquery

Answer 1

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

您应该从此更改您的代码：

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