Rendre une ligne modifiable en fonction d'une case à cocher en HTML

Question

J'ai une table en HTML. Le contenu de cette table est rempli dynamiquement. Chaque ligne de la table comporte des zones de texte et une case à cocher. Lorsque la page est chargée, toutes les zones de texte dans les lignes seront dans un état en lecture seule.

Maintenant, je veux changer l'état des zones de texte dans une ligne particulière à modifiable, si la case dans cette ligne est sélectionnée. En outre, les zones de texte doivent être en lecture seule si la case à cocher est désactivée.

Comment pourrais-je accomplir cela en utilisant Javascript? Aidez-moi, s'il vous plaît.

Answer 1

disant cela avec javascript simple serait pure douleur :) je suggère d'utiliser jQuery, par exemple:

$(':checkbox').click(function() { 
    var checkbox = $(this); 
    var row = checkbox.closest('tr'); 
    var inputText = $('input[type=text]', row); 
    if (checkbox.is(':checked')) { 
     inputText.attr('readonly', 'readonly'); 
    } 
    else { 
     inputText.removeAttr('readonly'); 
    } 
}); 

autrement

function HandleClickOnCheckbox() { 
    var checkbox = this; 
    var row; 
    var iter = checkbox; 
    while (!row) { 
     iter = iter.parent; 
     if (iter == window) { 
      break; 
     } 
     if (iter.tagName == 'tr') { 
      row = iter; 
      break; 
     } 
    } 
    if (!row) { 
     alert('row not found'); 
     return false; 
    } 
    var textBoxes = GetTextBoxes(row); 
    var method; 
    if (checkbox.checked) { 
     var disabledAttribute = document.createAttribute('disabled'); 
     disabledAttribute.nodeValue = 'disabled'; 
     method = function(textBox) { 
      textBox.setAttributeNode(disabledAttribute); 
     }; 
    } 
    else { 
     method = function(textBox) { 
      textBox.removeAttribute('disabled', 0); 
     } 
    } 
    for (var i = 0; i < textBoxes.length; i++) { 
     var textBox = textBoxes[i]; 
     method(textBox); 
    } 
} 
function GetTextBoxes(element) { 
    var textBoxes = new Array(); 
    for (var i = 0; i < element.children.lenght; i++) { 
     var child = element.children[i]; 
     if (child.tagName == 'input') { 
      if (child.type == 'text') { 
       textBoxes.push(child); 
      } 
     } 
     if (child.tagName == 'td') { 
      var childTextBoxes = GetTextBoxes(child); 
      if (childTextBoxes.length) { 
       for (var j = 0; j < childTextBoxes.length; j++) { 
        var childTextBox = childTextBoxes[j]; 
        textBoxes.push(childTextBox); 
       } 
      } 
     } 
    } 
    return textBoxes; 
} 

ce n'est pas testé!

Answer 2

Peut-être, vous pouvez commencer par traiter l'événement clic de la case à cocher en utilisant une instruction if/else pour vérifier si la case est cochée effectivement. Si c'est le cas, vous pouvez utiliser la ligne dans laquelle se trouve la case à cocher pour trouver toutes les zones de texte dans les différentes cellules et les activer/désactiver.

Utilisez-vous JQuery ou simplement Javascript?

Answer 3

Essayez cet extrait (en supposant que la case a une classe appelée « case ») si vous utilisez Jquery.

jQuery('tr.checkbox').click(function() { 
    if (jQuery(this).is(":checked")) { 
     jQuery('td', this).removeAttr('disabled'); 
    } else { 
     jQuery('td', this).attr('disabled', ''); 
    } 
});` 

Answer 4

Si vous ne me dérange pas en utilisant jQuery, vous pouvez faire:

$('checkbox').click(function() { 
    if ($(this).attr('checked')) { 
    $(this).parents('tr').children('input[type="text"]').each().attr('readonly', 'readonly'); 
    } else { 
    $(this).parents('tr').children('input[type="text"]').each().removeAttr('readonly'); 
    } 
}) 

Ou quelque chose comme ça. Je devrais tester pour être sûr.

Édité pour refléter le commentaire d'Andreas.