Отменить выбор нижних радиовходов

Question

У меня есть стол с офисами и 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> 

Answer 1

Это то, что вы имеете в виду?

$("button").click(function() { 
 
    for (i = 1; i <= 4; i++) { 
 
    \t var radioButtons = $("input:radio[name=price-"+i+"]"); 
 
    \t radioButtons.each(function(index) { 
 
     \t var $self = $(this); 
 
     \t 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

это решение я создал, но я не запустить его еще, вы можете просто Folow мыслящий не НАСТОЯЩЕМУ определенный код.

var office = document.getElementById('office'); 
 
var rows = office.getElementsByTagName('tr'); 
 
document.getElementsByTagName('button')[0].onclick = function(){ 
 
    var i,rlen=rows.length; 
 
\t for(i=0;i<rlen;i++){ 
 
    \t var radios = rows[i].getElementsByTagName('input'); 
 
    var k,len=radios.length; 
 
    for(k=0; k<len; k++){ 
 
    \t if(radios[k].getAttribute('checked')!==null){ 
 
     \t 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>