So rufen Sie eine Funktion vom Kontrollkästchen onclick oder onchange

Question

Ich habe ein Formular, in dem ich zwei Eingabefelder deaktivieren oder ausblenden möchten, indem Sie ein Kontrollkästchen aktivieren. Ich kann es leicht tun, wenn es auf document.ready ist, aber da ich diese Felder angehängt habe, wird die Funktion nicht wirksam. Wie rufe ich die Funktion mit onClick auf?

Hier ist mein Arbeits Code

$(function() { 
 
    $(checkbox).click(function() { 
 
    if ($('#checkbox').is(':checked')) { 
 
     $('#appTimes').find('input').attr('disabled', true); 
 
    } else { 
 
     $('#appTimes').find('input').removeAttr('disabled'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="appTimes" id="appTimes"> 
 
    <input name="stopTime1" type="text" id="stopTime1" /> 
 
    <input name="stopTime12" type="text" id="stopTime12" /> 
 
</div> 
 
<input name="checkbox" type="checkbox" id="checkbox" />

Und das ist, was ich zu tun versucht:

function boxDisable(e) { 
 
    $(this).click(function() { 
 
    if ($(this).is(':checked')) { 
 
     $(e).find('input').attr('disabled', true); 
 
    } else { 
 
     $(e).find('input').removeAttr('disabled'); 
 
    } 
 
    }); 
 
}

<div class="appTimes" id="appTimes"> 
 
    <input name="stopTime1" type="text" id="stopTime1" /> 
 
    <input name="stopTime12" type="text" id="stopTime12" /> 
 
</div> 
 
<input name="checkbox" onclick="boxdisable(appTimes);" type="checkbox" id="checkbox" />

--- BEARBEITEN --------------- Lassen Sie mich neu definieren: Mein Code verwendet. fügen Sie an, um mehrere Instanzen des obigen Codes zu erstellen. Da die Menge an Anhängen unbegrenzt ist, kann ich das Kontrollkästchen mit $('#id') nicht definieren, weil es Hunderte von ihnen wie $('#id1'), $('#id2') usw. geben kann. Ich brauche eine Funktion, die die genaue Angabe der Element-IDs vermeidet, heißt onClick die Checkbox und Beeinflussung vor Kopf Div, die auch angehängt ist.

Answer 1

Es funktioniert :)

function boxDisable(e, t) { 
 
    if (t.is(':checked')) { 
 
     $(e).find('input').attr('disabled', true); 
 
    } else { 
 
     $(e).find('input').removeAttr('disabled'); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="appTimes" id="appTimes"> 
 
    <input name="stopTime1" type="text" id="stopTime1" /> 
 
    <input name="stopTime12" type="text" id="stopTime12" /> 
 
</div> 
 
<input name="checkbox" onclick="boxDisable(appTimes, $(this));" type="checkbox" id="checkbox" />

Answer 2

Verwenden Sie nicht das Attribut onclick. Ihr Code fügt einen neuen onclick-Handler hinzu, nachdem der Benutzer geklickt hat. Das ist wahrscheinlich nicht das, was du willst.

Sie sollten auch prop anstelle von attr zum Ändern disabled verwenden.

Da das Element, an das Sie Ihr Ereignis anhängen möchten, möglicherweise nicht im Dokument vorhanden ist, hängen Sie es an den nächsten Vorfahren an, von dem Sie sicher sind, dass er dort sein wird.

$(function() { // wait for document ready 
    $('#parent-div').on('click', ':checkbox', function(e) { // attach click event 
     $('#appTimes').find(':text').prop('disabled', $(e.currentTarget).is(':checked')); // set disabled prop equal to checked property of checkbox 
    }); 
}); 

Answer 3

Wenn die Elemente zum Zeitpunkt der doc nicht fertig vorhanden ist, verwenden .on, etwa so:

$(document).ready(function(){ 
    $(document).on('change', 'input[type="checkbox"]', function(e){ 
     //do your stuff here 
    }); 

}); 

jQuery .on documentation

Answer 4

$(function() { 
 
    $(checkbox).click(function() { 
 
    if ($('#checkbox').is(':checked')) { 
 
     $('#appTimes').find('input').attr('disabled', true); 
 
    } else { 
 
     $('#appTimes').find('input').removeAttr('disabled'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="appTimes" id="appTimes"> 
 
    <input name="stopTime1" type="text" id="stopTime1" /> 
 
    <input name="stopTime12" type="text" id="stopTime12" /> 
 
</div> 
 
<input name="checkbox" type="checkbox" id="checkbox" />