jQuery case à cocher modifier, puis cliquez sur événement

Question

J'ai

<input type="checkbox" id="checkbox1" /> <br />
<input type="text" id="textbox1" />

et

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        $('#textbox1').val($(this).is(':checked'));
    });

    $('#checkbox1').click(function() {
        if (!$(this).is(':checked')) {
            return confirm("Are you sure?");
        }
    });
});

JSFIDDLE lien

Ici, l'événement a changé les mises à jour de la zone de texte valeur de la case d'état. J'utilise l'événement click pour confirmer l'action sur les décocher. Si l'utilisateur sélectionne l'annuler, la coche est restauré, mais le changement même des feux de avant la confirmation de laisser les choses dans un état incohérent (la zone de texte dit false lorsque la case est cochée). Comment puis-je faire face à l'annulation et de garder la zone de texte valeur compatible avec la vérification de l'état?

Merci

Answer 1

Eh bien je ne vois pas une réponse qui correspond à moi donc je vais poster ceci. Testé en JSFiddle et fait ce que vous demandez pour. Cette approche a l’avantage supplémentaire de tir lorsqu’un clic est effectué sur une étiquette associée à un contrôle checkbox.

Answer 2

<h3><a href="http://jsfiddle.net/4DqXv/3">Démo</a><p>Utilisation<code></code></p><pre><code></code></pre><p>Édité pour la dernière fois : P</p></h3>

Answer 3

La plupart des réponses ne s'y accroche (sans doute) si vous utilisez <label for="cbId">cb name</label>. Cela signifie que lorsque vous cliquez sur l'étiquette, il va de cocher la case au lieu de le faire directement en cliquant sur la case à cocher. (Pas exactement à la question, mais les divers résultats de recherche ont tendance à venir ici)

<div id="OuterDivOrBody">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1">Checkbox label</label>
    <br />
    <br />
    The confirm result:
    <input type="text" id="textbox1" />
</div>

Dans ce cas, vous pouvez utiliser:

Earlier versions of jQuery:

$('.OuterDivOrBody').delegate('#checkbox1', 'change', function () {
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

JSFiddle exemple avec jQuery 1.6.4

jQuery 1.7+

$('#checkbox1').on('change', function() { 
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

JSFiddle exemple avec la dernière jQuery 2.x

• Ajouté jsfiddle exemples et le html avec le cliquables case étiquette

Answer 4

Eh bien... juste pour le plaisir de sauver un mal de tête (son minuit passé ici), je pouvais venir avec :

Elle pourra être qu'utile

Answer 5

Se débarrasser de l’événement change et plutôt de changer la valeur de la zone de texte dans l’événement click. Plutôt que de retourner le résultat de la confirmer, l’attraper dans un var. Si c’est vrai, changer la valeur. Puis retournez le var.