Disable Radio Button from a table based on an input value

Question

I have a table whose first column is an input and the rest of the columns are a radio group Buttons. This first input can only be given the values from 1 to 4. Radio buttons start disabled, and can only be selected if the input value is 3 or 4. I was able to work on something but only with fixed ID and Radiobutton values.

Follows code:

$('.btn-number').click(function(e){
        e.preventDefault();
        
        var fieldName = $(this).attr('data-field');
        var type      = $(this).attr('data-type');
        var input = $("input[name='"+fieldName+"']");
        var currentVal = parseInt(input.val());
        if (!isNaN(currentVal)) {
            if(type == 'minus') {
                var minValue = parseInt(input.attr('min')); 
                if(!minValue) minValue = 1;
                if(currentVal > minValue) {
                    input.val(currentVal - 1).change();
                } 
                if(parseInt(input.val()) == minValue) {
                    $(this).attr('disabled', true);
                }
    
            } else if(type == 'plus') {
                var maxValue = parseInt(input.attr('max'));
                if(!maxValue) maxValue = 9999999999999;
                if(currentVal < maxValue) {
                    input.val(currentVal + 1).change();
                }
                if(parseInt(input.val()) == maxValue) {
                    $(this).attr('disabled', true);
                }
    
            }
        } else {
            input.val(0);
        }
    });
    $('.input-number').focusin(function(){
       $(this).data('oldValue', $(this).val());
    });
    $('.input-number').change(function() {
        
        var minValue =  parseInt($(this).attr('min'));
        var maxValue =  parseInt($(this).attr('max'));
        if(!minValue) minValue = 1;
        if(!maxValue) maxValue = 4;
        var valueCurrent = parseInt($(this).val());
        
        var name = $(this).attr('name');
        if(valueCurrent >= minValue) {
            $(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled')
        } else {
            alert('Sorry, the minimum value was reached');
            $(this).val($(this).data('oldValue'));
        }
        if(valueCurrent <= maxValue) {
            $(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled')
        } else {
            alert('Sorry, the maximum value was reached');
            $(this).val($(this).data('oldValue'));
        }
        
        
    });
    $(".input-number").keydown(function (e) {
            // Allow: backspace, delete, tab, escape, enter and .
            if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
                 // Allow: Ctrl+A
                (e.keyCode == 65 && e.ctrlKey === true) || 
                 // Allow: home, end, left, right
                (e.keyCode >= 35 && e.keyCode <= 39)) {
                     // let it happen, don't do anything
                     return;
            }
            // Ensure that it is a number and stop the keypress
            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();
            }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">   
  <div class="table-responsive">
    <table id="tabela_amostras" class="table table-striped table-bordered dt-responsive nowrap"> 
      <thead>
        <tr>
          <th class="all" align="center"><h3 class="panel-title" align="center">Amostra</h3></th>
          <th class="all" align="center"><h3 class="panel-title" align="center">Nota</h3></th>
          <th class="all" align="center"><h3 class="panel-title" align="center">Pele</h3></th>
          <th class="all" align="center"><h3 class="panel-title" align="center">Azedo</h3></th>
          <th class="all" align="center"><h3 class="panel-title" align="center">Gordura</h3></th>
          <th class="all" align="center"><h3 class="panel-title" align="center">Alcalino</h3></th>
          <th class="all" align="center"><h3 class="panel-title" align="center">Ácido</h3></th>
          <th class="all" align="center"><h3 class="panel-title" align="center">Anti Esp.</h3></th>
          <th class="all" align="center"><h3 class="panel-title" align="center">Doce</h3></th>
          <th class="all" align="center"><h3 class="panel-title" align="center">Ração</h3></th>
          <th class="all" align="center"><h3 class="panel-title" align="center">Sabão</h3></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="all" align="center">150</td>
          <td class="all" align="center">                       
            <div class="input-group">
              <span class="input-group-btn">
                <button type="button" class="btn btn-default btn-number" data-type="minus" data-field="num">
                  <span class="glyphicon glyphicon-minus"></span>
                </button>
              </span>               
              <input class="form-control input-number" id="nota" name="num" placeholder="Nota" type="text" class="nota" min="1" max="4">
              <span class="input-group-btn">
                <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="num">
                  <span class="glyphicon glyphicon-plus"></span>
                </button>
              </span>
            </div>
          </td>
          <td class="all" align="center">
            <input type="radio" name="groupRadio1" id="pele" autocomplete="off">
          </td>
          <td class="all"align="center">
            <input type="radio" name="groupRadio1" id="azedo" autocomplete="off">
          </td>
          <td class="all"align="center">
            <input type="radio" name="groupRadio1" id="gordura" autocomplete="off">
          </td>
          <td class="all"align="center">
            <input type="radio" name="groupRadio1" id="alcalino" autocomplete="off">
          </td>
          <td class="all"align="center">
            <input type="radio" name="groupRadio1" id="acido" autocomplete="off">
          </td>
          <td class="all"align="center">
            <input type="radio" name="groupRadio1" id="anti" autocomplete="off">
          </td>
          <td class="all"align="center">
            <input type="radio" name="groupRadio1" id="doce" autocomplete="off">
          </td>
          <td class="all"align="center">
            <input type="radio" name="groupRadio1" id="racao" autocomplete="off">
          </td>
          <td class="all"align="center">
            <input type="radio" name="groupRadio1" id="sabao" autocomplete="off">
          </td> 
        </tr> 
      </tbody>
    </table> 
  </div>    
</div> 

There is also the fiddle.

I can’t think of a way to get you to disable the Radio Button group automatically, with Javascript.

Answer 1

To get the logic you want you need to use a if, which tests whether the number you go to is part of the numbers that activate the radio buttons. For this you can even use an array with the values that activate in order to simplify:

const ativos = [3,4];

To disable the buttons just navigate up to the <tr> methodically closest, which is the table row and then navigate to each of the radio buttons and disable with the function prop jquery.

Example of this logic, which changes only the function change:

...

$('.input-number').change(function() {
    ...
    //ir buscar os radios por navegação
    const radios = $(this).closest("tr").find("input[name=groupRadio1]");

    //ver se o valueCurrent que é o valor corrente faz parte dos valores para ativar
    if (ativos.indexOf(valueCurrent) != -1){ //se faz
        radios.prop('disabled',false); //ativa removendo o atributo disabled
    }
    else { //caso contrário
        radios.prop('disabled',true); //desativa os radios
        radios.prop('checked',false); //e desmarca-os
    }
}

Integrated example with your code:

const ativos = [3,4];

$("input[type=radio]").prop('disabled',true);

$('.btn-number').click(function(e) {
  e.preventDefault();

  var fieldName = $(this).attr('data-field');
  var type = $(this).attr('data-type');
  var input = $("input[name='" + fieldName + "']");
  var currentVal = parseInt(input.val());
  if (!isNaN(currentVal)) {
    if (type == 'minus') {
      var minValue = parseInt(input.attr('min'));
      if (!minValue) minValue = 1;
      if (currentVal > minValue) {
        input.val(currentVal - 1).change();
      }
      if (parseInt(input.val()) == minValue) {
        $(this).attr('disabled', true);
      }

    } else if (type == 'plus') {
      var maxValue = parseInt(input.attr('max'));
      if (!maxValue) maxValue = 9999999999999;
      if (currentVal < maxValue) {
        input.val(currentVal + 1).change();
      }
      if (parseInt(input.val()) == maxValue) {
        $(this).attr('disabled', true);
      }

    }
  } else {
    input.val(0);
  }
});
$('.input-number').focusin(function() {
  $(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {

  var minValue = parseInt($(this).attr('min'));
  var maxValue = parseInt($(this).attr('max'));
  if (!minValue) minValue = 1;
  if (!maxValue) maxValue = 4;
  var valueCurrent = parseInt($(this).val());

  var name = $(this).attr('name');
  if (valueCurrent >= minValue) {
    $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
  } else {
    alert('Sorry, the minimum value was reached');
    $(this).val($(this).data('oldValue'));
  }
  if (valueCurrent <= maxValue) {
    $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
  } else {
    alert('Sorry, the maximum value was reached');
    $(this).val($(this).data('oldValue'));
  }
  
  const radios = $(this).closest("tr").find("input[name=groupRadio1]");
  
  if (ativos.indexOf(valueCurrent) != -1){
    radios.prop('disabled',false);
  }
  else {
    radios.prop('disabled',true);
    radios.prop('checked',false);
  }

});
$(".input-number").keydown(function(e) {
  // Allow: backspace, delete, tab, escape, enter and .
  if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
    // Allow: Ctrl+A
    (e.keyCode == 65 && e.ctrlKey === true) ||
    // Allow: home, end, left, right
    (e.keyCode >= 35 && e.keyCode <= 39)) {
    // let it happen, don't do anything
    return;
  }
  // Ensure that it is a number and stop the keypress
  if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
    e.preventDefault();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="table-responsive">
    <table id="tabela_amostras" class="table table-striped table-bordered dt-responsive nowrap">
      <thead>
        <tr>
          <th class="all" align="center">
            <h3 class="panel-title" align="center">Amostra</h3>
          </th>
          <th class="all" align="center">
            <h3 class="panel-title" align="center">Nota</h3>
          </th>
          <th class="all" align="center">
            <h3 class="panel-title" align="center">Pele</h3>
          </th>
          <th class="all" align="center">
            <h3 class="panel-title" align="center">Azedo</h3>
          </th>
          <th class="all" align="center">
            <h3 class="panel-title" align="center">Gordura</h3>
          </th>
          <th class="all" align="center">
            <h3 class="panel-title" align="center">Alcalino</h3>
          </th>
          <th class="all" align="center">
            <h3 class="panel-title" align="center">Ácido</h3>
          </th>
          <th class="all" align="center">
            <h3 class="panel-title" align="center">Anti Esp.</h3>
          </th>
          <th class="all" align="center">
            <h3 class="panel-title" align="center">Doce</h3>
          </th>
          <th class="all" align="center">
            <h3 class="panel-title" align="center">Ração</h3>
          </th>
          <th class="all" align="center">
            <h3 class="panel-title" align="center">Sabão</h3>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="all" align="center">150</td>
          <td class="all" align="center">
            <div class="input-group">
              <span class="input-group-btn">
                <button type="button" class="btn btn-default btn-number" data-type="minus" data-field="num">
                  <span class="glyphicon glyphicon-minus"></span>
              </button>
              </span>
              <input class="form-control input-number" id="nota" name="num" placeholder="Nota" type="text" class="nota" min="1" max="4">
              <span class="input-group-btn">
                <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="num">
                  <span class="glyphicon glyphicon-plus"></span>
              </button>
              </span>
            </div>
          </td>
          <td class="all" align="center">
            <input type="radio" name="groupRadio1" id="pele" autocomplete="off">
          </td>
          <td class="all" align="center">
            <input type="radio" name="groupRadio1" id="azedo" autocomplete="off">
          </td>
          <td class="all" align="center">
            <input type="radio" name="groupRadio1" id="gordura" autocomplete="off">
          </td>
          <td class="all" align="center">
            <input type="radio" name="groupRadio1" id="alcalino" autocomplete="off">
          </td>
          <td class="all" align="center">
            <input type="radio" name="groupRadio1" id="acido" autocomplete="off">
          </td>
          <td class="all" align="center">
            <input type="radio" name="groupRadio1" id="anti" autocomplete="off">
          </td>
          <td class="all" align="center">
            <input type="radio" name="groupRadio1" id="doce" autocomplete="off">
          </td>
          <td class="all" align="center">
            <input type="radio" name="groupRadio1" id="racao" autocomplete="off">
          </td>
          <td class="all" align="center">
            <input type="radio" name="groupRadio1" id="sabao" autocomplete="off">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>