1

Pessoal estou tentando fazer um validação linha a linha em uma table da seguinte forma: Se o produto for marcado como sim em um fornecedor ele nao pode ser marcado para outro fornecedor. Alguem pode me ajudar por favor? Segue modelo...

$("button").click(function() {
  $('#selectProduto').change(function(){
    $('#msg').html('');
  });

  var vIdProduto = $('#selectProduto option:selected').val();
  var vProduto = $('#selectProduto option:selected').text();
  var mensagem = $('#msg');
  var linha = '<tr class="selected" id="linha' + vIdProduto + '">' +
        '<td>' +
        '<input class="idprod" type="hidden" name="idproduto' + vIdProduto + '" value="' + vIdProduto + '">' + vProduto +
        '</td>' +
        '<td>' +
        `<select class="form-control" id="autoriza">
          <option value="">Comprar</option>
          <option value="Sim">Sim</option>
          <option value="Não">Não</option>
        </select>`+
        '</td>' +
        '<td>' +
        `<select class="form-control" id="autoriza">
          <option value="">Comprar</option>
          <option value="Sim">Sim</option>
          <option value="Não">Não</option>
        </select>`+
        '</td>' +
        '<td>' +
        `<select class="form-control" id="autoriza">
          <option value="">Comprar</option>
          <option value="Sim">Sim</option>
          <option value="Não">Não</option>
        </select>`+
        '</td>' +
        ' </tr>'

  if($("tr#linha" + vIdProduto).length === 0) {
    $('#mytbody').append(linha);
  } else {
    $('#msg').html("<b class='text-danger'>&#9888; Produto " + vIdProduto + " já foi adicionado!</b>");
  }
  });
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">

    <div class="col-md-10">
      <select class="form-control" id="selectProduto">
        <option value="A">Produto A</option>
        <option value="B">Produto B</option>
        <option value="C">Produto C</option>
      </select>
    </div>

    <div class="col-md-2">
      <button type="button" name="button">Adicionar</button>
    </div>

    <div class="col-md-12">
      <span id="msg"></span><br>
    </div>

    <div class="col-md-12">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Produto</th>
            <th>Forn01</th>
            <th>Forn02</th>
            <th>Forn03</th>
          </tr>
        </thead>
        <tbody id="mytbody">

        </tbody>
      </table>
    </div>
  </div>
</div>

4
  • 1
    Poderia explicar melhor seu problema? Estou confuso na sua pergunta rsrs. Commented 26/12/2018 às 18:20
  • Obrigado pelo retorno, posso sim. Nao posso deixar o sistema aceitar que o usuario compre o mesmo produto em fornecedores diferente, certo? Ex: Se ele marcar como sim no select forn01 o select forn02 e forn03 tera que ser não ou desbilitar entendeu?
    – frodrigues
    Commented 26/12/2018 às 18:22
  • 2
    Cara seu código está sujeito a gerar problemas, estão se repetindo os ids do selects criados.
    – LeAndrade
    Commented 26/12/2018 às 18:42
  • Obrigado pelo retorno LeAndrade , vou corrigir.
    – frodrigues
    Commented 27/12/2018 às 9:27

3 Respostas 3

2

O mais sensato para esse tipo de formulário seria utilizar input type radio

Quando uma opção RADIO é marcada, esta só será desmarcada quando outra opção RADIO com mesmo NAME for selecionada.

Veja como funciona

Produto A <input type="radio" name="prodA" value="Forn01"/>
<input type="radio" name="prodA" value="Forn02"/>
<input type="radio" name="prodA" value="Forn03"/>
<br>
Produto B <input type="radio" name="prodB" value="Forn01"/>
<input type="radio" name="prodB" value="Forn02"/>
<input type="radio" name="prodB" value="Forn03"/>
<br>
Produto C <input type="radio" name="prodC" value="Forn01"/>
<input type="radio" name="prodC" value="Forn02"/>
<input type="radio" name="prodC" value="Forn03"/>

Portanto seu código funcionaria assim: veja esse form sendo recuperado no PHP

$("button").click(function() {
  $('#selectProduto').change(function(){
    $('#msg').html('');
  });

  var vIdProduto = $('#selectProduto option:selected').val();
  var vProduto = $('#selectProduto option:selected').text();
  var mensagem = $('#msg');
  var linha = '<tr class="selected" id="linha' + vIdProduto + '">' +
        '<td>' +
        '<input class="idprod" type="hidden" name="idproduto' + vIdProduto + '" value="' + vIdProduto + '">' + vProduto +
        '</td>' + 
        '<td>' + 
        '<input type="radio" name="prod'+vIdProduto +'" value="Forn01">'+
        '</td>' +
        '<td>' + 
        '<input type="radio" name="prod'+vIdProduto +'" value="Forn02">'+
        '</td>' +
        '<td>' +
        '<input type="radio" name="prod'+vIdProduto +'" value="Forn03">'+
        '</td>' +
        ' </tr>'

  if($("tr#linha" + vIdProduto).length === 0) {
    $('#mytbody').append(linha);
  } else {
    $('#msg').html("<b class='text-danger'>&#9888; Produto " + vIdProduto + " já foi adicionado!</b>");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
  <div class="row">

    <div class="col-md-10">
      <select class="form-control" id="selectProduto">
        <option value="A">Produto A</option>
        <option value="B">Produto B</option>
        <option value="C">Produto C</option>
      </select>
    </div>

    <div class="col-md-2">
      <button type="button" name="button">Adicionar</button>
    </div>

    <div class="col-md-12">
      <span id="msg"></span><br>
    </div>

    <div class="col-md-12">
    <form action="" method="post">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Produto</th>
            <th>Forn01</th>
            <th>Forn02</th>
            <th>Forn03</th>
          </tr>
        </thead>
        
        <tbody id="mytbody">

        </tbody>

      </table>
              <input type="submit">
        </form>
    </div>
  </div>
</div>

8
  • Isso mesmo. Fica bem melhor.
    – Sam
    Commented 27/12/2018 às 1:54
  • Obrigado pelo retorno Sam e Leo. Tentei fazer dessa forma porem tenho que usar o name do input como name[] dai da erro no momento de recuperar os dados no php.
    – frodrigues
    Commented 27/12/2018 às 9:29
  • @frodrigues, como assim usar o name do input como name[] ? E a qual input vc se refere?
    – user60252
    Commented 27/12/2018 às 13:39
  • Estou usando php com Laravel. No controllher quando recebo os requests para colocar dentro do laço para inserir no banco ele me da uma mensagem de objeto nao cotabil se nao colocar o name com chaves na frente.
    – frodrigues
    Commented 27/12/2018 às 13:48
  • Ex: $cont = 0; while($cont < count($idproduto)){ $detalhe = new RequisicaoDet(); $detalhe->idrequisicao=$requisicoes->idrequisicao; $detalhe->idproduto=$idproduto[$cont]; $detalhe->qnt=$qnt[$cont]; $detalhe->detalhe=$detalhes[$cont]; $detalhe->idcentrocusto=$idcentrocusto[$cont]; $detalhe->save(); $cont=$cont+1; }
    – frodrigues
    Commented 27/12/2018 às 13:49
0

Como já foi dito, repetir id's é incorreto e traz problemas. Na verdade você nem vai precisar de id's nos selects, então remova-os todos.

Basta apenas criar esse evento que irá desabilitar os outros selects da mesma linha ao selecionar uma das opções:

$(document).on("change", "#mytbody select", function(){

   if($(this).val() == "Sim"){
      $(this).closest("tr").find("select").not(this).prop("disabled", true);
   }else{
      $(this).closest("tr").find("select").prop("disabled", false);
   }

});

Caso volte a selecionar a opção "Comprar" (que tem valor vazio), as outras opções são habilitadas de novo.

Não entendi a função da opção "Não". Não bastaria apenas a opção "Sim" e o que não foi marcado com "Sim" deixar vazio na option "Comprar"?

Veja:

$(document).on("change", "#mytbody select", function(){
   
   if($(this).val() == "Sim"){
      $(this).closest("tr").find("select").not(this).prop("disabled", true);
   }else{
      $(this).closest("tr").find("select").prop("disabled", false);
   }
   
});

   $("button").click(function() {
  $('#selectProduto').change(function(){
    $('#msg').html('');
  });

  var vIdProduto = $('#selectProduto option:selected').val();
  var vProduto = $('#selectProduto option:selected').text();
  var mensagem = $('#msg');
  var linha = '<tr class="selected" id="linha' + vIdProduto + '">' +
        '<td>' +
        '<input class="idprod" type="hidden" name="idproduto' + vIdProduto + '" value="' + vIdProduto + '">' + vProduto +
        '</td>' +
        '<td>' +
        `<select class="form-control">
          <option value="">Comprar</option>
          <option value="Sim">Sim</option>
          <option value="Não">Não</option>
        </select>`+
        '</td>' +
        '<td>' +
        `<select class="form-control">
          <option value="">Comprar</option>
          <option value="Sim">Sim</option>
          <option value="Não">Não</option>
        </select>`+
        '</td>' +
        '<td>' +
        `<select class="form-control">
          <option value="">Comprar</option>
          <option value="Sim">Sim</option>
          <option value="Não">Não</option>
        </select>`+
        '</td>' +
        ' </tr>'

  if($("tr#linha" + vIdProduto).length === 0) {
    $('#mytbody').append(linha);
  } else {
    $('#msg').html("<b class='text-danger'>&#9888; Produto " + vIdProduto + " já foi adicionado!</b>");
  }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">

    <div class="col-md-10">
      <select class="form-control" id="selectProduto">
        <option value="A">Produto A</option>
        <option value="B">Produto B</option>
        <option value="C">Produto C</option>
      </select>
    </div>

    <div class="col-md-2">
      <button type="button" name="button">Adicionar</button>
    </div>

    <div class="col-md-12">
      <span id="msg"></span><br>
    </div>

    <div class="col-md-12">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Produto</th>
            <th>Forn01</th>
            <th>Forn02</th>
            <th>Forn03</th>
          </tr>
        </thead>
        <tbody id="mytbody">

        </tbody>
      </table>
    </div>
  </div>
</div>

7
  • Não posso me arrepender e trocar de fornecedor?
    – user60252
    Commented 26/12/2018 às 19:42
  • isso tá meio miado, tem que explicar ao usuario esse esquema
    – user60252
    Commented 26/12/2018 às 19:47
  • não é isso, eu digo na página tem que instruir o usuario tipo `amigo se vc quiser mudar de fornecedor selecione a opção "Comprar" (que tem valor vazio) e escolha outro fornrcedor
    – user60252
    Commented 26/12/2018 às 19:51
  • Seria até válido, mas como eu achei a opção "Não" desnecessária, nem fui perder tempo com isso.
    – Sam
    Commented 26/12/2018 às 20:03
  • Na verdade, isso deveria ser um radiobutton.
    – Sam
    Commented 26/12/2018 às 20:04
0

Primeiramente iremos remover os id="autoriza" dos seus select, pois eles estão duplicados e isso é um problema.

Agora iremos adicionar uma nova classe nos seus select para podermos reconhecê-los no JavaScript. Coloque todos igual o código abaixo:

<select class="form-control select-comprar">

Por fim, adicione o JavaScript para tratar a habilitação e desabilitação dos selects:

$('.select-comprar').on('change', function () {
    if ($(this).val() == "Sim") {
        controlarHabilitacaoSelectComprar(false, $(this));
    }
    else {
        controlarHabilitacaoSelectComprar(true, $(this));
    }
});

function controlarHabilitacaoSelectComprar(habilitar, coluna) {
    //Pegamos todas as colunas da mesma linha do select que alteramos o valor
    var siblings = coluna.parent().siblings();

    //Iremos realizar um loop em todos os selects que possuirem a classe que definimos como "select-comprar"
    siblings.find('.teste-select').each(function () {
        if (habilitar) {
            $(this).removeAttr('disabled');
        }
        else {
            $(this).attr('disabled', 'disabled');
            $(this).val('Não');
        }
    });
}
1
  • Obrigado Pedro muito bom
    – frodrigues
    Commented 27/12/2018 às 9:37

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 .