取消选择较低的无线电输入

deselect lower radio inputs

本文关键字：无线电 输入 选择 取消      更新时间：2023-09-26

我有一个表格，上面有办公室和每个办公室的 3 种不同价格状态（无线电输入）。对于每个办公室，我选择了不同的价格状态。我需要的是单击按钮使所选输入"禁用"之前的输入。因此，换句话说，用户只能选择较大的付款状态，但不能选择较低的付款状态。这是小提琴：https://jsfiddle.net/L9cm6bkn/

<table>
  <tr>
    <td>Office 1</td>
    <td><input type="radio" name="price-1" checked></td>
    <td><input type="radio" name="price-1"></td>
    <td><input type="radio" name="price-1"></td>
  </tr>
  <tr>
    <td>Office 2</td>
    <td><input type="radio" name="price-2"></td>
    <td><input type="radio" name="price-2" checked></td>
    <td><input type="radio" name="price-2"></td>
  </tr>
  <tr>
    <td>Office 3</td>
    <td><input type="radio" name="price-3"></td>
    <td><input type="radio" name="price-3"></td>
    <td><input type="radio" name="price-3" checked></td>
  </tr>
  <tr>
    <td>Office 4</td>
    <td><input type="radio" name="price-4"></td>
    <td><input type="radio" name="price-4" checked></td>
    <td><input type="radio" name="price-4"></td>
  </tr>
</table>
<button>click</button>

这是你的意思吗？

$( "button" ).click(function() {
  for (i = 1; i <= 4; i++) { 
  	var radioButtons = $("input:radio[name=price-"+i+"]");
  	 radioButtons.each(function( index ) {
     	var $self = $(this);
     	if(!$self.is(':checked')) {
        $self.attr('disabled', 'disabled');
      }
      else {
      return false;
      }
     
     
    });
  }
});
td{padding:8px; border: 1px solid #858585;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Office 1</td>
    <td><input type="radio" name="price-1" checked></td>
    <td><input type="radio" name="price-1"></td>
    <td><input type="radio" name="price-1"></td>
  </tr>
  <tr>
    <td>Office 2</td>
    <td><input type="radio" name="price-2"></td>
    <td><input type="radio" name="price-2" checked></td>
    <td><input type="radio" name="price-2"></td>
  </tr>
  <tr>
    <td>Office 3</td>
    <td><input type="radio" name="price-3"></td>
    <td><input type="radio" name="price-3"></td>
    <td><input type="radio" name="price-3" checked></td>
  </tr>
  <tr>
    <td>Office 4</td>
    <td><input type="radio" name="price-4"></td>
    <td><input type="radio" name="price-4" checked></td>
    <td><input type="radio" name="price-4"></td>
  </tr>
</table>
<button>click</button>

这是我

创建的解决方案，但我还没有运行它，你可能只是想不了解具体的代码。

var office = document.getElementById('office');
var rows = office.getElementsByTagName('tr');
document.getElementsByTagName('button')[0].onclick = function(){
   var i,rlen=rows.length;
	for(i=0;i<rlen;i++){
  	  var radios = rows[i].getElementsByTagName('input');
     var k,len=radios.length;
     for(k=0; k<len; k++){
    	  if(radios[k].getAttribute('checked')!==null){
      	  break;
        }
        radios[k].setAttribute('disabled','disabled');
     }
   }
}
td{padding:8px; border: 1px solid #858585;}
<table id="office">
  <tr>
    <td>Office 1</td>
    <td><input type="radio" name="price-1" checked></td>
    <td><input type="radio" name="price-1"></td>
    <td><input type="radio" name="price-1"></td>
  </tr>
  <tr>
    <td>Office 2</td>
    <td><input type="radio" name="price-2"></td>
    <td><input type="radio" name="price-2" checked></td>
    <td><input type="radio" name="price-2"></td>
  </tr>
  <tr>
    <td>Office 3</td>
    <td><input type="radio" name="price-3"></td>
    <td><input type="radio" name="price-3"></td>
    <td><input type="radio" name="price-3" checked></td>
  </tr>
  <tr>
    <td>Office 4</td>
    <td><input type="radio" name="price-4"></td>
    <td><input type="radio" name="price-4" checked></td>
    <td><input type="radio" name="price-4"></td>
  </tr>
</table>
<button>click</button>

相关文章：