Q:

Enabling and Disabling Radio Buttons with js

help! I am making a some of radio buttons to insert into my data base but with the selected value rules may not be selected twice, I have got the js code for but it doesn't work optimally,the problem is if I chosen 1 in price, then I chose 2 in distace then disable follows the second column while disable in the first column disappears.`
<html>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
    $('input:radio').click(function() {

       $('input:radio').removeAttr('disabled');
       if($(this).is(':checked')) {
           var val = $(this).val();

           $('input:radio').each(function() {
               if(val == $(this).val()) {
                   $(this).attr('disabled',true);
               }
           });

           $(this).removeAttr('disabled');
       }
    });
});
</script>
<body>

  <form class="" action="" method="post">

  <table class="table borderless">
    <tr>
      <th>#</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
    <tr>
      <th>Price</th>
      <th><input type="radio" name="price"  value="1"></th>
      <th><input type="radio" name="price"  value="2"></th>
      <th><input type="radio" name="price"  value="3"></th>
      <th><input type="radio" name="price"  value="4"></th>
      <th><input type="radio" name="price"  value="5"></th>
    </tr>
    <tr>
      <th>distance</th>
      <th><input type="radio" name="distance"  value="1"></th>
      <th><input type="radio" name="distance"  value="2"></th>
      <th><input type="radio" name="distance"  value="3"></th>
      <th><input type="radio" name="distance"  value="4"></th>
      <th><input type="radio" name="distance"  value="5"></th>
    </tr>
    <tr>
      <th>facilities</th>
      <th><input type="radio" name="facilities"  value="1"></th>
      <th><input type="radio" name="facilities"  value="2"></th>
      <th><input type="radio" name="facilities"  value="3"></th>
      <th><input type="radio" name="facilities"  value="4"></th>
      <th><input type="radio" name="facilities"  value="5"></th>
    </tr>
    <tr>
      <th>large</th>
      <th><input type="radio" name="large"  value="1"></th>
      <th><input type="radio" name="large"  value="2"></th>
      <th><input type="radio" name="large"  value="3"></th>
      <th><input type="radio" name="large"  value="4"></th>
      <th><input type="radio" name="large"  value="5"></th>
    </tr>
  </table>
  <button type="sumbit" name="submit">Submit</button>
  </form>

</body>
</html>```
[enter image description here][1]`

  [1]: https://i.stack.imgur.com/6QI93.png

A:

Is this what you're trying to achieve? 
https://jsfiddle.net/4ayLkm6h/1/
What I've done is create a variable to keep track of what the previous value was:
  const values = {};

I use this in the click handler to check "has the value changed for this column?", if it has, is re-enable all the checkboxes for that column(for example value=1):
  if (values[name]) {
    $('input:radio[value="' + values[name] + '"]').attr('disabled', false);
  }

Then I update the values for next time:
  values[name] = val;

Lastly I disable the ones in the current column:
$('input:radio[value="' + val + '"]:not(:checked)').attr('disabled', true);

The first time you click the check:
if (values[name]) {

Will be false, so I don't re-enable anything (because nothing is disabled yet), so this code is only relevant on the second click, to check if we need to re-enable the previous column before we disable the currently clicked column.

