4

Com knockoutjs

Estou com uma dificuldade em pegar valores de input dentro de uma table para comparar ele teria que ser como um radio button, porém são dois checkbox como pode ser visto no abaixo:

function DemoItem(id, name) {
    var self = this;

    self.id = ko.observable(id);
    self.Name = ko.observable(name);
    self.Selected = ko.observable(false);
}

function ViewModel() {
    var self = this;

    self.availableItems = ko.observableArray();
    self.associatedItemIds = ko.observableArray();

    self.init = function () {
        self.availableItems.push(new DemoItem(1, 'One'));
        self.availableItems.push(new DemoItem(2, 'Two'));
        self.availableItems.push(new DemoItem(3, 'Three'));
        self.availableItems.push(new DemoItem(4, 'Four'));
        self.availableItems.push(new DemoItem(5, 'Five'));
    };
    
    self.toggleAssociation = function (item) {
        if (item.Selected() === true) console.log("dissociate item " + item.id());
        else console.log("associate item " + item.id());
        item.Selected(!(item.Selected()));
        return true;
    };
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
Available Items:
<table data-bind="foreach: $root.availableItems">
    <tr><td><input type="checkbox" data-bind="value: id(), checked: $root.associatedItemIds, click: $root.toggleAssociation" />	
    <span data-bind="text: '&nbsp;' + Name()"></span>
    </td></tr>
</table>
<br/>
Associated Item Ids:
<div data-bind="foreach: $root.associatedItemIds">
        <span data-bind="text: $data"></span>
    <br/>
</div>

Observação: estou utilizando então essa tabela é gerando dinamicamente onde posso ter varias tabela.

Basicamente eu estou tentando fazer como se checkbox fosse igual um radio button em um radio group

function DemoItem(id, name) {
    var self = this;

    self.id = ko.observable(id);
    self.Name = ko.observable(name);
    self.Selected = ko.observable(false);
}

function ViewModel() {
    var self = this;

    self.availableItems = ko.observableArray();
    self.associatedItemIds = ko.observableArray();

    self.init = function () {
        self.availableItems.push(new DemoItem(1, 'One'));
        self.availableItems.push(new DemoItem(2, 'Two'));
        self.availableItems.push(new DemoItem(3, 'Three'));
        self.availableItems.push(new DemoItem(4, 'Four'));
        self.availableItems.push(new DemoItem(5, 'Five'));
    };
    
    self.toggleAssociation = function (item) {
        if (item.Selected() === true) console.log("dissociate item " + item.id());
        else console.log("associate item " + item.id());
        item.Selected(!(item.Selected()));
        return true;
    };
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init();

function marcaDesmarca(caller) {
  var checks = document.querySelectorAll('input[type="checkbox"]');    
  for(let i = 0; i < checks.length; i++) {
    checks[i].checked = checks[i] == caller;   
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
Available Items:
<table data-bind="foreach: $root.availableItems">
    <tr><td><input type="checkbox" data-bind="value: id(), checked: $root.associatedItemIds, click: $root.toggleAssociation"  onclick="marcaDesmarca(this)"/>	
    <span data-bind="text: '&nbsp;' + Name()"></span>
    </td></tr>
</table>
<br/>
Associated Item Ids:
<div data-bind="foreach: $root.associatedItemIds">
        <span data-bind="text: $data"></span>
    <br/>
</div>

Bom minha questão é duplicada dessa"marcar uma checkbox e desmarcar as outras", porém uso o código e veja o que acontece, no meu eu tenho que marca todos o check para funcionar corretamente e ainda no meu projeto que o campos é gerado dinamicamente ele descamar todos os check que não deveria acontecer, no entanto quando clica no check novamente ele tem que desmarcar quando o mesmo estiver marcado.

2
  • Não ficou muito claro na pergunta o que você deseja fazer, você quer alterar o valor do select com base no ckeckbox? Ou seja, se os dois checkbox estiverem selecionados o select tenha um valor e, caso não estejam selecionados o select tenha outro valor?
    – Leandro
    Commented 11/08/2017 às 13:33
  • E possivelmente você não deveria fazer isso: Qual é o impacto de se alterar o comportamento padrão de um elemento HTML?
    – Woss
    Commented 13/08/2017 às 20:10

1 Resposta 1

3

Seria isso que você precisa?

$(document).ready(function(){
  $(document).on('change', ':checkbox', function(){
    //Verifica se o checkbox clicado está checado
    if($(this).is(':checked')){
        //Desmarca os demais checkbox que estão na mesma tabela que o checkbox clicado
        $(this).closest('table').find(':checkbox').not(this).prop('checked', false);  
        //Atribui o valor 0 para o select que esteja na mesma tabela que o checkbox clicado
        $(this).closest('table').find('select').prop('value', 0);
    }
  });
  $(document).on('change', 'select', function(){
      //Desmarca os checkbox que estão na mesma tabela do select que teve um valor selecionado
      $(this).closest('table').find(':checkbox').prop('checked', false);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tg" data-id="${$index}">

Tabela 1

 <tr>
  <td class="tg-yw4l"><span for="active">Comforme: </span></td>
 <td><input type="checkbox" value="1" data-bind="checkedValue:Comformity, checked: Comformity" /></td>
</tr>                   
<tr>
<td class="tg-yw4l"><span for="active">Oportunidade de Melhoria: </span></td>
<td><input type="checkbox" value="1" data-bind="checkedValue:OM, checked:OM" id="OM" /></td>
</tr>
<tr>
<td class="tg-yw4l" ><span>Não Conformidade: </span></td>
<td class="tg-yw4l">
<span>
<select data-bind="value: NonComformityType" id="NonComformityType">
<option value="0" selected>Escolher</option>
<option value="2">Maior</option>
<option value="1">Menor</option>
</select>
</span>
</td>
</tr>

 </table>

<br><br>

<table class="tg" data-id="${$index}">

Tabela 2

 <tr>
  <td class="tg-yw4l"><span for="active">Comforme: </span></td>
 <td><input type="checkbox" value="1" data-bind="checkedValue:Comformity, checked: Comformity" /></td>
</tr>                   
<tr>
<td class="tg-yw4l"><span for="active">Oportunidade de Melhoria: </span></td>
<td><input type="checkbox" value="1" data-bind="checkedValue:OM, checked:OM" id="OM" /></td>
</tr>
<tr>
<td class="tg-yw4l" ><span>Não Conformidade: </span></td>
<td class="tg-yw4l">
<span>
<select data-bind="value: NonComformityType" id="NonComformityType">
<option value="0" selected>Escolher</option>
<option value="2">Maior</option>
<option value="1">Menor</option>
</select>
</span>
</td>
</tr>

 </table>
 
<br><br>

<table class="tg" data-id="${$index}">

Tabela 3

 <tr>
  <td class="tg-yw4l"><span for="active">Comforme: </span></td>
 <td><input type="checkbox" value="1" data-bind="checkedValue:Comformity, checked: Comformity" /></td>
</tr>                   
<tr>
<td class="tg-yw4l"><span for="active">Oportunidade de Melhoria: </span></td>
<td><input type="checkbox" value="1" data-bind="checkedValue:OM, checked:OM" id="OM" /></td>
</tr>
<tr>
<td class="tg-yw4l" ><span>Não Conformidade: </span></td>
<td class="tg-yw4l">
<span>
<select data-bind="value: NonComformityType" id="NonComformityType">
<option value="0" selected>Escolher</option>
<option value="2">Maior</option>
<option value="1">Menor</option>
</select>
</span>
</td>
</tr>

 </table>

2
  • @BrunoH. Editei a resposta colocando duas tabelas diferentes e modificando um pouco o script, agora não está mais interferindo nos inputs da outra tabela.
    – Leandro
    Commented 11/08/2017 às 16:03
  • @BrunoH. Acredito que agora não interfira mais nos inputs de outras tabelas, fiz o exemplo colocando 3 tabelas iguais e só altera os inputs da tabela correspondente ao checkbox ou select clicado.
    – Leandro
    Commented 13/08/2017 às 18:14

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