2017-12-31 110 views
0

Ich möchte die Eingabe aktivieren/deaktivieren, wenn das Kontrollkästchen aktiviert ist. Ich habe viele Abschnitte in meiner Seite mit der gleichen Struktur, damit ich weiß, dass ichjQuery deaktiviert die Eingabe in einer anderen Zeile, wenn das Kontrollkästchen aktiviert ist

this 

Konstruktion verwenden muß. Ich habe versucht, so etwas zu tun, aber es funktioniert nicht. Jeder könnte mir helfen?

$('.component-other').on('click', function(){ 
 
    var isChecked = $(this).is(':checked'); 
 
    if (isChecked) { 
 
     $(this).closest('.row').find('.component-other-value').prop("disabled", false); 
 
    } else { 
 
     $(this).closest('.row').find('.component-other-value').prop("disabled", true); 
 
    } 
 
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-12"> 
 
     <label for="sause-oth">Other</label> 
 
     <input type="checkbox" name="sause" id="sause-oth" class="enable component-other"> 
 
    </div> 
 
    </div> 
 
    <div class="row input-row"> 
 
    <div class="col-sm-12"> 
 
     <input type="text" name="sause-other" id="sause-other" class="component-other-value" disabled="disabled" placeholder="Type text here"> 
 
    </div> 
 
    </div> 
 
</div> 
 
</section> 
 
<section> 
 
    <div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-12"> 
 
     <label for="sause-oth">Other</label> 
 
     <input type="checkbox" name="sause" id="sause-oth-1" class="enable component-other"> 
 
    </div> 
 
    </div> 
 
    <div class="row input-row"> 
 
    <div class="col-sm-12"> 
 
     <input type="text" name="sause-other" id="sause-other-1" class="component-other-value" disabled="disabled" placeholder="Type text here"> 
 
    </div> 
 
    </div> 
 
</div> 
 
</section>

+0

@Andreas Ich weiß. Ich habe nur Elemente kopiert, um 2 Abschnitte zu machen – MMPL1

Antwort

1

Die nächstgelegene .row ist nicht genug. Sie müssen eine weitere Ebene in das DOM einsteigen.

$('.component-other').on('click', function(){ 
 
    $(this).closest('.container') 
 
      .find('.component-other-value') 
 
      .prop("disabled", !this.checked); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <label for="sause-oth">Other</label> 
 
     <input type="checkbox" name="sause" id="sause-oth" class="enable component-other"> 
 
     </div> 
 
    </div> 
 
    <div class="row input-row"> 
 
     <div class="col-sm-12"> 
 
     <input type="text" name="sause-other" id="sause-other" class="component-other-value" disabled="disabled" placeholder="Type text here"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 
<section> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <label for="sause-oth">Other</label> 
 
     <input type="checkbox" name="sause" id="sause-oth-1" class="enable component-other"> 
 
     </div> 
 
    </div> 
 
    <div class="row input-row"> 
 
     <div class="col-sm-12"> 
 
     <input type="text" name="sause-other" id="sause-other-1" class="component-other-value" disabled="disabled" placeholder="Type text here"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

+0

Danke! Das ist was ich will! – MMPL1

Verwandte Themen