Désactiver plusieurs cases à cocher avec javascript

Question

J'ai un problème avec ma fonction JS. Je vais vous expliquer cela avec mon code et un Prt Sc.

Code = http://jsfiddle.net/dKeRf/

Ceci est une fonction Php et la fonction JS.

écran = http://img824.imageshack.us/i/antoe.png/

Si l'un des deux case à cocher sur la table est cochée, la case à cocher dans le tableau deux doit être désactivé. Pour le moment Cela fonctionne pour la première case, mais pas pour la seconde, et je vous demande pourquoi? :)

J'utilise « 10 » dans mon « Pour » saillir pour un test, je vais changer ce dernier par le nombre de lignes de la table.

Merci pour votre aide et ont une bonne journée!

Answer 1

Ajouter une classe à toutes les cases à cocher:

<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'> 
<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'> 
<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'> 
<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'> 

Utilisez ensuite jquery pour mettre à jour toutes les cases à la fois:

<script> 
$(document).ready(function(){ 
    $(".selectAll").click(function() { 
     if($(".selectAll").attr("checked")) { 
      $(".the_checkbox:checkbox").attr("disabled", true); 
     } else { 
      $(".the_checkbox:checkbox").removeAttr("disabled"); 
     } 
    });   
}); 
</script> 

MISE À JOUR: Modifie la réponse à utiliser. nom de classe pour mettre à jour les cases à cocher au lieu de l'ID afin que l'ID puisse rester unique et conforme aux normes HTML.

Answer 2

ID ne sont pas autorisés à commencer par un certain nombre, ils doivent commencer par une lettre. Donc document.getElementById(1234) va échouer (je pense que IE pourrait ne rien dire et l'autoriser, mais FF ne fonctionne pas). Vous devriez accepter de simplement mettre une lettre devant le numéro et changer le getElementById en document.getElementById('cb'+id2);.

En outre, juste une note de côté, si vous passez en this à une fonction onClick, ce paramètre est une référence à l'élément qui a été cliqué. Donc, il n'est pas nécessaire d'obtenir box.id, puis faites document.getElementById(checkId). techniquement document.getElementById(checkId) est === box vous pourriez donc juste dire box.checked.

http://www.w3.org/TR/html4/types.html#h-6.2. Ceci est la spécification qui parle au sujet des exigences de nommage des attributs ID:

jetons d'identité et le nom doit commencer par une lettre ([A-Za-z]) et peut être suivi par un certain nombre de lettres, de chiffres ([0 -9]), les traits d'union ("-"), les traits de soulignement ("_"), les deux-points (":") et les points (".").

Edit:

Encore mieux que d'utiliser document.getElementById() pour sélectionner chaque case à cocher, serait d'utiliser document.getElementById() sur un élément parent que les cases que vous souhaitez désactiver la part (comme la table, ils sont) puis utilisez document.getElementsByTagName('input') pour obtenir une collection de toutes les cases à cocher et les boucler/les désactiver avec cela.Ainsi, le code de désactivation JS ressemblerait à ceci:

Certaines table:

<input type='checkbox' onClick='checkCBs(this,"someTable1");'> 
<table id='someTable1'> 
    <tr> 
    <td>This is checkbox 1:</td> 
    <td><input type='checkbox' name='group1' value='checkbox1'></td> 
    </tr> 
    <tr> 
    <td>This is checkbox 2:</td> 
    <td><input type='checkbox' name='group1' value='checkbox2'></td> 
    </tr> 
</table> 

Le code:

function checkCBs(box, parent){ 
    var parent = document.getElementById(parent), 
     CBs = parent.getElementsByTagName('input'), 
     i; 
    //loop through all input elements 
    for(i=0;i<CBs.length;i++){ 
     //make sure the input is a checkbox 
     if(CBs[i].type && CBs[i].type=='checkbox'){ 
      //set disabled on this checkbox to opposite 
      //of whether box is checked. 
      CBs[i].disabled = !box.checked; 
     } 
    } 

}