jquery deaktivieren Textfeld mit Kontrollkästchen (mehrere Textfeld mit Kontrollkästchen)

Question

Ich versuche, ein Textfeld zu deaktivieren, wenn ein Benutzer das Kontrollkästchen aktiviert.

Ich habe es mit einem einzigen Textfeld und Kontrollkästchen getan.

Ich bin jetzt stecken was, wenn Benutzer mehrere Textbox mit Checkbox hinzufügen kann?

hier ist, was meine Ausgabe so weit aussieht.

was mein Ausgang hat, ist, dass, wenn ich auf die Checkbox in eine andere Behinderte attr schaltet nur auf einer Textbox.

Was ich tun möchte, ist, dass, wenn ein Kontrollkästchen aktiviert war, das Textfeld deaktiviert bleibt, bis ich das entsprechende Kontrollkästchen deaktivieren.

hier ist was ich bisher codiert habe.

HTML

<div id="operator_properties"> 
     <label for="operator_title">Operator's title: </label> <input type="text" id="operator_title"> 
     <br /><br /> 
     <button id="append" class="btn btn-primary">Add Connectors</button> 
     <br /><br /> 
     <div class="col-md-10"> 
      <div id="parent"></div> 
     </div> 
     <div class="clearfix"></div> 
     <hr /> 
     <div class="col-md-12"> 
      <button class="btn btn-success" id="operator_btn"> 
       Confirm 
      </button> 
     </div> 
     <div class="clearfix"></div> 
    </div> 

JQuery

$(function() { 
    var count = 1; 
    $('#append').click(function() { 
     $('#parent').append('<div class="operator"> <div class="row"> <div class="col-md-2"><input type="text" id="input' + count + '" class="input-text" placeholder="Input' + count + ' title"><br /> <input type="checkbox" id="disableinput' + count + '" class="disable-input" /><label for="disableinput' + count + '" style="vertical-align: middle;"> &nbsp; Disable</label> </div> &nbsp <div class="col-md-3"><input type="text" id="output' + count + '" class="output-text" placeholder="Output' + count + ' title"> <a href="#" id="' + count + '" class="remove">Remove</a> <br /> <input type="checkbox" id="disableoutput' + count + '" class="disable-output" /><label for="disableoutput' + count + '"style="vertical-align: middle;"> &nbsp; Disable</label></div></div></div>'); 
     count++; 
    }); 
}); 

$(document).on('click', '.remove', function() { 
    $(this).closest("div.operator").remove(); 
}); 

$(document).on('change', '.disable-input', function() { 
    $("#parent").find("input.input-text").attr("disabled", false); 
    if ($(this).is(":checked")) 
     $(this).parent().find("input.input-text").attr("disabled", true); 
    //console.log('working'); 
}); 

Dank fortschrittlicher!

Answer 1

die folgende Zeile entfernen:

$("#parent").find("input.input-text").attr("disabled", false); 

... weil das alle Eingaben innerhalb des #parent Element ermöglicht wird.

Sie scheinen bereits zu wissen, wie $(this).parent(...).find(...) zu verwenden, um die Textbox zu bekommen, um das Klickpunkt bezogen, so ändern Sie einfach diesen Code:

$(document).on('change', '.disable-input', function() { 
    $(this).parent().find("input.input-text").prop("disabled", this.checked); 
}); 

Beachten Sie, dass Sie einfach this.checked anstatt $(this).is(":checked")) verwenden - effiziente und leichter zu lesen. Verwenden Sie auch .prop() anstelle von .attr() für diese Art von dynamischen Zustandsänderungen.

Answer 2

dies versuchen, Sie haben damit alle von behinderten Einstellung false =

$(function() { 
    var count = 1; 
    $('#append').click(function() { 
     $('#parent').append('<div class="operator"> <div class="row"> <div class="col-md-2"><input type="text" id="input' + count + '" class="input-text" placeholder="Input' + count + ' title"><br /> <input type="checkbox" id="disableinput' + count + '" class="disable-input" /><label for="disableinput' + count + '" style="vertical-align: middle;"> &nbsp; Disable</label> </div> &nbsp <div class="col-md-3"><input type="text" id="output' + count + '" class="output-text" placeholder="Output' + count + ' title"> <a href="#" id="' + count + '" class="remove">Remove</a> <br /> <input type="checkbox" id="disableoutput' + count + '" class="disable-output" /><label for="disableoutput' + count + '"style="vertical-align: middle;"> &nbsp; Disable</label></div></div></div>'); 
     count++; 
    }); 
}); 

$(document).on('click', '.remove', function() { 
    $(this).closest("div.operator").remove(); 
}); 

$(document).on('change', '.disable-input', function() { 

    //$("#parent").find("input.input-text").attr("disabled", false); 
    if ($(this).is(":checked")) 
    { 
     $(this).parent().find("input.input-text").attr("disabled", true); 
    } 
    else if($(this).not(":checked")){ 
     $(this).parent().find("input.input-text").attr("disabled", false); 
    } 
    //console.log('working'); 
});