[Résolu] Cocher une checkbox depuis une table

Bonjour à tous.

Je débute en javascript/jQuery. Je bloque sur un petit problème :

j'affiche des checkbox et des textfield sur la meme ligne dans un tableau. Par défaut, mes textfield sont disabled.
Ce que je souhaite, c'est sur la même ligne du tableau, lorsque je clique sur la checkbox dont la ligne serait la numéro 2, le textfield de la ligne 2 uniquement doit passer en disabled = "false". Ainsi, ce que je ne sais pas faire actuellement, c'est tout simplement de récupérer la checkbox sur laquelle on a cliqué et de dire que le textfield de cette même ligne doit passer à false.

Actuellement, lorsque je coche n'importe quelle checkbox, j'obtiens tous mes text en disabled = false mais c'est normal vu mon code
.

<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 
<table>
    <tr>
        <th>Nom de la taille</th>
        <th>Cochez les cases qui vous interessent pour créer ce set</th>
        <th>Poids de répartition</th>
    </tr>
    <%-- Parcours de la Map des tailles en session, et utilisation de l'objet varStatus. --%>
    <c:forEach items="${ sessionScope.tailles }" var="mapTailleProduits" varStatus="boucle">
        <%-- Simple test de parité sur l'index de parcours, pour alterner la couleur de fond de chaque ligne du tableau. --%>
        <tr class="${boucle.index % 2 == 0 ? 'pair' : 'impair'}">
            <td><c:out value="${ mapTailleProduits.value.taille}" /></td>
            <td><input type="checkbox" name="idTailleCheck" />
            <td><input type="text" name="poids" disabled="true"  />
        </tr>
    </c:forEach>
    <span class="erreur">${form.erreurs['erreurPoids']}</span>
</table>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 
<script>
$(':checkbox').change(function(){
    if( $(':checkbox').is(':checked') == true ){
        $(':text').attr('disabled', false);
    }
    else{
        $(':text').attr('disabled', true);
    }
});
</script>

Merci pour votre aide !
Modifié par linkev21 (24 Feb 2016 - 12:18)

Hello

Voici une solution :

$(':checkbox').change(function() {
  var input = $(this).parents("tr").find('input:text');
  if ($(':checkbox').is(':checked') == true) {
    input.attr('disabled', false);
  } else {
    input.attr('disabled', true);
  }
});

$(this) est l'élément cliqué, il suffit ensuite de parcourir le DOM pour atteindre l'objet souhaité. Je remonte jusqu'au TR, puis je cherche dans les enfants un input text.

PS : CSS3 te permet de cibler les lignes pair et impair d'une table grâce à nth-child

Bonjour et bienvenue sur le forum,

EDIT : avec un temps de retard, autre proposition que Oken

En fait, pour récupérer l'information que tu souhaites, tu dois utiliser l'objet $(this) qui correspond à l'objet jQuery sur lequel l’événement a eu lieu, i.e. ici l'événement "change" (mais cela fonctionne avec les autres événements clic... etc...)

Donc quand tu as ton élément, pour passer à ton input:text, il faut passer par son parent direct (td), prendre le frère suivant de ce dernier (td), puis sélectionner son enfant (tu suis toujours ? ), ce qui donne :

$(this).parent().next().children(':text')

Et donc en définitive :

$(':checkbox').change(function(){
  $(this).parent().next().children(':text').prop('disabled', !$(this).prop('checked'))
});

Oken a écrit :
PS : CSS3 te permet de cibler les lignes pair et impair d'une table grâce à nth-child

J'ai failli le dire quand j'ai vu les classes pair/impair !
Modifié par SolidSnake (24 Feb 2016 - 14:26)

Wow ! merci pour vos réponses !!

En effet, j'avais vu que pour cibler un objet il fallait utiliser $(this) mais je ne devais pas le cibler comme il le faut

Pour l'affichage pair/impair, ça marche plutôt bien ce que j'utilise et je vous avoue que je ne me préoccupe pas vraiment de la mise en forme mais merci du conseil.

SolidSnake, merci pour le petit cours de théorie ^^
Modifié par linkev21 (24 Feb 2016 - 15:16)