3

チェックボックスを使用して、登録フォームの一部のマルチリストの有効状態と無効状態を切り替えています。チェックボックスにはカテゴリのラベルが付いており、マルチリストにはそのカテゴリに属する​​アイテムが含まれています。

jQuery1.7.2を使用しています。

        $('#sch_cat_hockeyschools').toggle(function(ev) {
                ev.stopPropagation();
                $("#type_select_hockeyschools").prop("disabled", false);
                $("#type_select_hockeyschools").removeProp("disabled", "disabled");
                $("#sch_cat_hockeyschools").prop("checked", true);
                $("#sch_cat_hockeyschools").prop("checked", "checked");
            }, function(ev) {
                ev.stopPropagation();
                $("#type_select_hockeyschools option:selected").removeAttr("selected");
                $("#type_select_hockeyschools").prop("disabled", true);
                $("#type_select_hockeyschools").prop("disabled", "disabled");
                $("#sch_cat_hockeyschools").prop("checked", false);
                $("#sch_cat_hockeyschools").removeProp("checked");
            });

対応するチェックボックスHTMLのサンプル：

<input class="catmark" type="checkbox" name="sch_categories[]" id="sch_cat_hockeyschools" value="1" />General Hockey Schools
<input class="catmark" type="checkbox" name="sch_categories[]" id="sch_cat_springhockey" value="2" />Spring Hockey

問題は、チェックボックスをクリックしても、チェックボックスがオンになったりチェックされたりしないことです。stopPropagation()すぐにチェックされていない状態に戻ります。これは、関数が役立つと思いました。どうやらそうではありません。マルチリストは期待どおりに有効または無効になりますが、チェックボックスがオンになりません。

この問題の結果、フォームが送信されると、選択されたカテゴリを含む配列が空になります。したがって、少なくとも1つのチェックされたカテゴリがフォームの必須フィールドであるため、フォームを処理するPHPスクリプトは、必須フィールドが空白のままであることを通知するエラーの1つをスローします。

チェックボックスが実際にチェックされていることを確認し、ひいては実際のデータを処理スクリプトにPOSTする方法についてのアイデアはありますか？

みんなありがとう。

4

1 に答える 1

4

問題は、ドキュメントtoggleによると-の使用です：

実装はイベントで.preventDefault（）も呼び出すため、要素で.toggle（）が呼び出された場合、リンクはたどられず、ボタンはクリックされません。

toggleそれ自体がを呼び出しpreventDefaultています。これは、イベントのデフォルトの動作を停止し、チェックボックスをオン/オフにします。

トグルするのではなく、bindまたはon（以下の編集ノートを参照）を使用して、イベントのリスナーを追加します。このリスナーでchange、状態を調べることができます。

$('#sch_cat_hockeyschools').on('change', function () {
    if (this.checked) {
        // do stuff for a checked box   
        console.log('check is on');
    } else {
        // do stuff for an unchecked box        
        console.log('check is off');
    }
});

jsFiddleで試してみてください。

編集 このコードはメソッドの使用on法を示していますが、jsFiddleの例では。を使用していることに注意してくださいbind。Sam Sehnertが指摘しているように、on>jQuery1.7でイベントをアタッチするための推奨される方法です。古いバージョンのjQueryを使用bindしている場合は、jsFiddleの例のように使用します。

ドキュメンテーション

于 2012-06-27T22:58:04.533 に答える