3

Estou a criar checkboxes a partir da BD. Tenho uma outra que define se todas as outras ficam marcadas ou não. Quando corro a primeira vez funciona bem, mas à segunda já não.

HTML

<div class="row smart-form">
  <section class="col col-3">
   <div class="checkbox">
     <label>
      <input type="checkbox" name="selectAll" id="check0" class="checkbox style-0 checkDoc">
      <span>Marcar/Desmarcar todos</span>
     </label>
   </div>
  </section>
 </div>
<div class="row smart-form">
 @for(dt <- docTipo) {
  <section class="col col-3">
    <div class="checkbox">
     <label>
      <input type="checkbox" name="docTipo" id="[email protected]" class="checkbox style-0">
      <span>@dt.descricao</span>
     </label>
    </div>
  </section>
 }
</div>

JQUERY

$(document).on('change','.checkDoc', function() {
            if(this.checked) {
                $("input[name=docTipo]").attr("checked", true);
                $("input[name=docTipo]").attr("disabled", true);
            } else {
                $("input[name=docTipo]").attr("checked", false);
                $("input[name=docTipo]").attr("disabled", false);
            }
        });

Ao primeiro click na checkbox de controlo todas as outras ficam selecionadas e disabled, ao segundo click fica tudo descelecionado e enabled, ao terceiro só ficam disabled mas não ficam marcadas. Já inspecionei elemento, e é adicionado o checked em cada uma mas no browser não aparece o visto :s

Inspecionar Elemento

inserir a descrição da imagem aqui

Alguma sugestão?

4
  • Podes colocar o HTML renderizado? e se possivel juntar um jsFiddle?
    – Sergio
    Commented 10/03/2015 às 17:11
  • Nunca fiz jsFiddle :s E as checkboxes estão a ser criadas a partir da BD, penso que o problema de não funcionar possa vir daí. Commented 10/03/2015 às 17:12
  • Ok, não tem problema. Junta então o HTML que aparece no lado do cliente/browser.
    – Sergio
    Commented 10/03/2015 às 17:12
  • Penso que seja isso que queira ver, desculpe mas sou novo a trabalhar nisto :) Commented 10/03/2015 às 17:16

2 Respostas 2

3

Deves usar o .prop() e não o .attr(). Na documentação do .attr() encontra-se a explicação:

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

Em portuguûes:

Para propriedades do DOM como checked, selected, ou estado disabled de elementos form ou checkboxes use .prop()

Entretanto essas linhas todas dentro do event handler podiam ser reduzidas a:

$(document).on('change', '.checkDoc', function () {
    $("input[name=docTipo]").prop({
        checked: this.checked,
        disabled: this.checked
    });
});

jsFiddle: https://jsfiddle.net/7mqx59f0/

1
  • 1
    Era exatamente isso que precisava, obrigado ;) Commented 10/03/2015 às 17:22
3

Utilize o on click e prop ao inves de attr

$(document).on( "click",'input[type=checkbox][name=selectAll]', function() {
    var isChecked = $(this).is(':checked');
    $('input[type=checkbox][name=docTipo]').prop('checked',isChecked);
});
1
  • Era exatamente isso que eu queria, está perfeitamente funcional ;) Obrigado Commented 10/03/2015 às 17:21

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 .