Javascript 自动更改并禁用另一个无线电字段中的较小值

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

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

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

$'option1:radio'。在“更改”功能上{ document.getElementByIdvalue1.value=$this.val； document.getElementByIdvalue2.value=$this.val； }; $'option2:radio'。在“更改”功能上{ document.getElementByIdvalue11.value=$this.val； document.getElementByIdvalue12.value=$this.val； }; .集装箱{ 边缘顶部：30px； } 选择1 5. 10 15 20 选择2 10 15 20 25

---

您需要在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
});

---

虽然它更新了底层的无线电，但不会更改引导按钮组的状态。它也不会在选项2中选择第一个可用的收音机。在进行更改时，它不会读取所选的更改值状态。这太神奇了！！非常感谢你。引导CSS似乎不理解单选按钮的功能。可能是因为我使用的是.btw，我们可以在选项2中添加一个类来标记它吗？说出btn disabled类名，这样我就可以更改disabled按钮的设计了？@Viksool，太神奇了。对此我感激不尽：