Question

我有一张办公桌和每个办公室3种不同的价格状态（无线电输入）。对于每个办公室，我选择了不同的价格状态。我需要的是通过单击按钮在选择输入之前输入＆＃34;禁用＆＃34;。换句话说，用户只能选择更高的付款状态，但无法选择较低的付款状态。这是小提琴：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>

Answer 1

这是你的意思吗？

$( "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>

Answer 2

这是我创建的解决方案，但我还没有运行它，你可能只是认为不是特定的代码。

＆＃13;

==

＆＃13;

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

＆＃13;

td{padding:8px; border: 1px solid #858585;}

＆＃13;

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

2 个答案: