Das Geschwister aus der Tabellenzeile kann nicht aufgelöst werden

Ich versuche, den Eingabetyp von benachbarten Spalten zu deaktivieren, wenn ein Kontrollkästchen für diese Zeile aktiviert ist. Ich habe versucht, wie unten, aber nicht zu deaktivieren. Bitte werfen Sie einen Blick darauf und schlagen Sie vor, wie Sie deaktivieren können.Das Geschwister aus der Tabellenzeile kann nicht aufgelöst werden

$("input:checkbox[class=associationcheckbox]").each(function() { 
 
    var index; 
 
    $(this).on('click', function() { 
 
    if ($(this).prop('checked')) { 
 
     $(this).closest('td').siblings('td.associationCheckbox1').prop("disabled", false); 
 
    } else { 
 
     $(this).closest('td').siblings('td.associationCheckbox1').prop("disabled", false); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script data-require="[email protected]" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
</head> 
 

 
<body> 
 
    <h1>Hello Plunker!</h1> 
 
    <table> 
 
    <tr> 
 
     <td>Balu</td> 
 
     <td> 
 
     <input class="associationCheckbox" type="checkbox" name="Balu" /> 
 
     </td> 
 
     <td> 
 
     <input class="associationCheckbox1" type="number" name="Balu" value="0" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Balu</td> 
 
     <td> 
 
     <input class="associationCheckbox" type="checkbox" name="Balu" /> 
 
     </td> 
 
     <td> 
 
     <input class="associationCheckbox1" type="number" name="Balu" value="0" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Balu</td> 
 
     <td> 
 
     <input class="associationCheckbox" type="checkbox" name="Balu" /> 
 
     </td> 
 
     <td> 
 
     <input class="associationCheckbox1" type="number" name="Balu" value="0" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 
</html>

Quelle

2016-07-20 Balanjaneyulu K

Sie fügen jQuery zweimal hinzu - ist das nur ein Fehler in Ihrem Snippet? –

Ihr Zustand ist gleich Deaktivieren zu false Können Sie klarstellen, was Sie wollten? Sowohl if als auch andere setzen '.prop (" disabled ", false);' – guradio

Hallo Guradio, Sorry. Ein kleiner Tippfehler hier. Wenn ich das Kontrollkästchen ankreuze, sollte es deaktiviert sein, sonst ist es im aktivierten Zustand. –

Ihre Wähler sind etwas ganz über dem Platz. Die Fälle der Klassen müssen übereinstimmen, Sie brauchen nicht die each() und Sie versuchen, die td durch die Klasse input auszuwählen, die nie funktionieren wird. Sie setzen auch disabled zu false in beiden Seiten des if Zustand, aber ich nehme an, dass das nur ein Tippfehler ist.

Um das zu erreichen, was Sie brauchen, können Sie einfach ein Klick-Handler zum Kontrollkästchen nach Klasse hinzufügen, dessen zugehöriges Textfeld finden und es als deaktiviert/aktiviert basierend auf der checked-Eigenschaft festlegen. Versuchen Sie folgendes:

$(".associationCheckbox").on('click', function() { 
 
    $(this).closest('tr').find('.associationCheckbox1').prop("disabled", this.checked); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script data-require="[email protected]" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
</head> 
 
<body> 
 
    <h1>Hello Plunker!</h1> 
 
    <table> 
 
    <tr> 
 
     <td>Balu</td> 
 
     <td> 
 
     <input class="associationCheckbox" type="checkbox" name="Balu" /> 
 
     </td> 
 
     <td> 
 
     <input class="associationCheckbox1" type="number" name="Balu" value="0" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Balu</td> 
 
     <td> 
 
     <input class="associationCheckbox" type="checkbox" name="Balu" /> 
 
     </td> 
 
     <td> 
 
     <input class="associationCheckbox1" type="number" name="Balu" value="0" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Balu</td> 
 
     <td> 
 
     <input class="associationCheckbox" type="checkbox" name="Balu" /> 
 
     </td> 
 
     <td> 
 
     <input class="associationCheckbox1" type="number" name="Balu" value="0" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

Ich würde auch vorschlagen, dass Sie die Klasse der Textbox als associationCheckbox1 ändern, ist ein wenig verwirrend.

Quelle

2016-07-20 10:39:25

Hallo Rory. Es funktioniert perfekt. Vielen Dank. Ich werde die Klassennamen ändern. –

Das Geschwister aus der Tabellenzeile kann nicht aufgelöst werden

Antwort

Verwandte Themen