3

Eu tenho uma tabela cuja primeira coluna é um input e o resto das colunas é um grupo de radio buttons. Este primeiro input só pode ser informado os valores de 1 até 4. Os botões Radio iniciam desabilitados, e só podem ser selecionados caso o valor do input seja 3 ou 4. Eu consegui trabalhar em algo mas só com valores fixos de ID e RadioButton.

Segue código:

$('.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> 

Tem também o fiddle.

Não consigo pensar numa forma de fazer com que desabilite o grupo dos Radio Button automaticamente, com JavaScript.

1 Resposta 1

3

Para conseguir a lógica que pretende precisa de utilizar um if, que teste se o numero em que vai faz parte dos números que ativam os botões radio. Para isso pode até utilizar um array com os valores que ativam de forma a simplificar:

const ativos = [3,4];

Para desativar os botões basta navegar para cima até ao <tr> com método closest, que é a linha da tabela e depois desse navegar até a cada um dos botões radio e desativar com a função prop de Jquery.

Exemplo desta lógica, que altera apenas a função 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
    }
}

Exemplo integrado com o seu código:

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>

3
  • Estarei dando uma olhada. Obrigado
    – Killer
    24/10/2017 às 19:30
  • é possível ali onde você coloca const radios = $(this).closest("tr").find("input[name=groupRadio1]"); eu colocar name=groupRadio + index da row? Pois vou ter mais de um group de radio pra cada linha.
    – Killer
    24/10/2017 às 19:36
  • 1
    @Killer Sim, se eles diferem no name com base num índice basta fazer como disse: $(this).closest("tr").find("input[name=groupRadio" + indice +"]")
    – Isac
    24/10/2017 às 19:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .