1

私の HTML フォームには、次のマークアップがあります。

<fieldset>
    <legend>
        <label> <input type="checkbox" class="warnOnUncheck" /> Include the following data </label>
    </legend>
    <div class="fieldsetContent">
        <!-- and a bunch of <input type="text" /> here. -->
    </div>
 </fieldset>

DOM 対応で呼び出される 2 つのスクリプトがあります。

  1. 最初は、チェックボックスがオフの場合にフィールドセットの内容を折りたたんで、
  2. 2 つ目はconfirm()、チェックボックスがオフの場合に確認メッセージを表示します。ユーザーが「いいえ」をクリックすると、チェックボックスが再度チェックされます。

問題は、最初のイベント ハンドラーが常に呼び出されるため、ユーザーが [いいえ] をクリックしてもフィールドセットの内容が非表示になることです。

これが私の（要約された）jQueryコードです（DOM対応イベントハンドラー中に呼び出されます）：

$("fieldset.collapseable legend input").change(function(event) {

    var localFieldsetContent = $(this).closest("fieldset").find("div.fieldsetContent");

    var checked = $(this).is(":checked");
    if( checked && localFieldsetContent.is(":visible") ) {
        // if checked and already visible, then skip entirely.
        return;
    }

    localFieldsetContent.slideToggle(200);
);

$("input[type=checkbox].warnOnUncheck").change( function(event) {

    if( !this.checked ) {

        var message = $(this).data("warnMessage");

        var confirmed = confirm( message );
        if( !confirmed ) {

            this.checked = true;
            event.stopImmediatePropagation();
        }
    }

} );

私はそれevent.stopImmediatePropagation();がうまくいくと思っていましたが、そうではありません。

confirmedが false のときにフィールドセットが折りたたまれないようにするにはどうすればよいですか?

4

3 に答える 3

1

あなたの当面の問題：最初のハンドラーは、2番目のハンドラー（確認のあるハンドラー）が呼び出される前に実行されますstopImmediatePropagation。ハンドラーを逆の順序でバインドすると、動作するはずです。

$("input[type=checkbox].warnOnUncheck").change( function(event) {

    if( !this.checked ) {

        var message = $(this).data("warnMessage");

        var confirmed = confirm( message );
        if( !confirmed ) {

            this.checked = true;
            event.stopImmediatePropagation();
        }
    }

} );

$("fieldset.collapseable legend input").change(function(event) {

    var localFieldsetContent = $(this).closest("fieldset").find("div.fieldsetContent");

    var checked = $(this).is(":checked");
    if( checked && localFieldsetContent.is(":visible") ) {
        // if checked and already visible, then skip entirely.
        return;
    }

    localFieldsetContent.slideToggle(200);
);

ただし、この動作を 2 つの関数に分割するのは非常に安全ではありません。

2 つのハンドラーを 1 つにマージします。

$("input[type=checkbox].warnOnUncheck").change( function(event) {
    var confirmed = true;
    if( !this.checked ) {
        var message = $(this).data("warnMessage");

        var confirmed = confirm( message );
        if( !confirmed ) {
            this.checked = true;
        }
    }

    if (confirmed) {
        var localFieldsetContent = $(this).closest("fieldset").find("div.fieldsetContent");
        localFieldsetContent.slideToggle(200);
    }
} );

ここにjsfiddleがあります

ハンドラーをマージできない場合は、「折りたたみ」機能をカスタム イベントにバインドし、チェックボックスの「クリック」イベントでそれをトリガーすることができます。

この更新された jsfiddleを参照してください。

$("input[type=checkbox].warnOnUncheck").change( function(event) {
    var confirmed = true;
    if( !this.checked ) {
        var message = $(this).attr("data-warnMessage");
        confirmed = confirm( message );
        if( !confirmed ) {
            this.checked = true;
        }
    }

        if (confirmed) {
            $(this).trigger("myToggleVisibility");
        }
} );

$("fieldset.collapseable").on("myToggleVisibility", function(event) {
    $(this).find('.fieldsetContent').slideToggle(200);
});
于 2013-03-18T07:56:41.247 に答える
0

使用するevent.preventDefault();

また

if(!confirmed){
    this.checked = true;
    return false;
}
于 2013-03-18T07:48:20.623 に答える
0

これを試して：

$("input[type=checkbox].warnOnUncheck").change( function(event) {    
    if ( event.isImmediatePropagationStopped() ) {
         return false;
    }
    if( !this.checked ) {    
        var message = $(this).data("warnMessage");    
        var confirmed = confirm( message );
        if( !confirmed ) {    
            this.checked = true;
            event.stopImmediatePropagation();
        }
    }    
});

http://api.jquery.com/event.isImmediatePropagationStopped/を読む

于 2013-03-18T07:57:18.017 に答える