checkbox aktivieren onload die Darstellung anderer Elemente

Ok, Die Frage hier ist, um damit ein Formular zu packen Informationen aus einer mysql-Einstellungen, wie aktiviert oder deaktiviert werden. dann ein Kontrollkästchen wird, um zu bestimmen, wenn die die 3 folgenden text Felder (box123) werden aktiviert oder deaktiviert, je nach Anforderung.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="test.js"></script>
</head>
<body>
    <form>
        <input type="checkbox" name="detailsgiven" id="checker" checked=checked>Enabled?
        <br>
        <input type='text' name="details" id="tb1" value='box1'>
        <br>
        <input type='text' name="details" id="tb2" value='box2'>
        <br>
        <input type='text' name="details" id="tb3" value='box3'>
        <br>
    </form>
</body>

</html

>

test.js Jquery-code, das ermöglicht die überprüfung aktiviert oder deaktiviert werden, je nach Aktivierung die Variable

toggleInputs($('#checker'));

$('#checker').click(function () {
    toggleInputs($(this));
});

function toggleInputs(element) {
    if (element.prop('checked')) {
        $('#tb1').prop('disabled', false);
        $('#tb2').prop('disabled', false);
        $('#tb3').prop('disabled', false);
    } else {
        $('#tb1').prop('disabled', true);
        $('#tb2').prop('disabled', true);
        $('#tb3').prop('disabled', true);
    }
}
InformationsquelleAutor Sickest | 2013-09-01
  1. 2

    Hier gehen Sie... Eigentlich mit jquery als Sie Ihre Frage gestellt:

    HTML

    <form>
    <input type="checkbox" name="detailsgiven" id="checker" checked=checked>Enabled?
    <br>
    <input type='text' name="details" id="tb1" value='box1'>
    <br>
    <input type='text' name="details" id="tb2" value='box2'>
    <br>
    <input type='text' name="details" id="tb3" value='box3'>
    <br>
</form>

    JavaScript

    $(document).ready(function() {
   toggleInputs($('#checker'));
   $('#checker').click(function () {
       toggleInputs($(this));
    });
});

function toggleInputs(element) {
    if (element.prop('checked')) {
        $('#tb1').prop('disabled', false);
        $('#tb2').prop('disabled', false);
        $('#tb3').prop('disabled', false);
    } else {
        $('#tb1').prop('disabled', true);
        $('#tb2').prop('disabled', true);
        $('#tb3').prop('disabled', true);
    }
}

    http://jsfiddle.net/Q9Lg4/40/

    Wenn der erste Anruf ist aus den Elementen in die Körper sind noch nicht geladen. Sie können wickeln Sie den ersten Anruf zu toggleInputs in ein JQuery-ready-Ereignis-Funktion oder das Skript-tag enthält test.js nach der form.

    • ich bin mir nicht sicher, warum, aber wenn ich die testen diese auf mein host funktioniert es nicht.
    • Sind Sie mit JQuery oder nur JavaScript?
    • Ich aktualisierte die Frage, nehmen Sie einen Blick
    • Siehe aktualisierte Antwort...
    • ja, der neue code wird mir nicht erlauben, mit der das Skript über die form, es Bedarf immer noch unten
    • Warum nicht einfach $('#tb1,#tb2,#tb3').prop('disabled', element.prop('checked'));? (Innerhalb der Funktion, offensichtlich.)
    • Mein schlechtes. Siehe update.
    • Ihre Lösung ist sehr sauber und übersichtlich. jsfiddle.net/MVGys/9 Dies ist Ihre Lösung, und es funktioniert wie er schlug vor, mit ein paar kleinen Anpassungen. Danke.
    • glücklich Ihr Skript funktioniert über die form, seine nicht
    • stackoverflow.com/questions/18555181/...

    InformationsquelleAutor happyhuman
  2. 3

    Während Sie bereits akzeptiert die Antwort, ich fühle, dass die Antwort zu kompliziert, die Lösung etwas, und Links in unnötige Redundanz. Das heißt, ich würde vorschlagen, die folgenden Ansatz:

    function toggleInputs(element) {
    /* using a multiple selector
       checking whether the check-box is checked or not using ':is()`,
       which returns a Boolean */
    $('#tb1, #tb2, #tb3').prop('disabled', element.is(':checked'));
}

$('#checker').change(function(){
    //event-handling (reacting to the change event)
    toggleInputs($(this));
    /* the next change() (without arguments) triggers the change event,
       and, therefore, the event-handling */
}).change();

    JS Fiddle demo.

    Geändert, die vor-Funktion (bei Verwendung der ! - operator), um die Felder editierbar, während die input ist checked, und disabled während der input deaktiviert ist:

    function toggleInputs(element) {
    $('#tb1, #tb2, #tb3').prop('disabled', !element.is(':checked'));
}

$('#checker').change(function(){
    toggleInputs($(this));
}).change();

    JS Fiddle demo.

    Referenzen:

    • ja, dies funktioniert nicht, der code funktioniert.
    • auch die vorherigen Frage (Bevor ich editiert) es war gefragt, für die folgenden: das Häkchen wird aktiviert oder deaktiviert, abhängig von einer mysql-Feld. und die Felder müssen aktiviert werden, wenn die Option aktiviert ist, und deaktiviert, wenn die Option deaktiviert ist. Ihr Beispiel wurde von jemand anderes, das auch nicht gelesen haben, meine Frage (bevor er editiert wurde) werde ich gehen Sie voran und halten Sie glücklich mit der Lösung. trotzdem danke
    • zum Beispiel, wenn Sie entfernt checked=checked das Kontrollkästchen nicht aktiviert ist und die Felder offen sind, was Ihre Skript nutzlos
    • ich nehme es zurück, dieses Skript funktioniert NICHT, es ist das gleiche problem mit der glücklich vor seinem letzten edit. das Skript muss unter die form, um zu arbeiten.
    • ich habe eine neue Frage jsfiddle.net/Q9Lg4/46 was passiert, wenn ich verwenden möchten, 2-Eingang auf der gleiche form ist, kann ich nicht einfach den code duplizieren? mit happy code bitte
    • Wenn Sie noch weitere Fragen haben, bitten, eine andere Frage. Wenn Sie Fragen haben, die über seine Antwort, und wie um es zu erweitern, dann Fragen ihn. Im Grunde genommen, aber Sie brauchen, wickeln Sie die entsprechenden check-Boxen mit den entsprechenden Eingaben, und Kontext, anstatt ids, zum wählen der richtigen Eingänge.
    • stackoverflow.com/questions/18555181/...

    InformationsquelleAutor David Thomas
Schreibe einen Kommentar