0

以下のjqueryスクリプトを使用して、ユーザーが一度に同じ名前の複数のチェックボックスを選択できないようにしています

 $("input:checkbox").click(function () {
    if ($(this).is(":checked")) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).prop("checked", false);
        $(this).prop("checked", true);
    } else {
        $(this).prop("checked", false);
    }
});

そして、ここにチェックボックスがあります

 <div class="ChekMarkWrap">
  <input id="chkFilm_4" type="checkbox" name="four" style="margin-left:2px;" /><br />film
 </div>

 <div class="ChekMarkWrap">
  <input id="chkTv_4" type="checkbox" name="four" /><br />tv
 </div>

 <div class="ChekMarkWrap">
  <input id="chkWeb_4" type="checkbox" name="four" /><br />web
 </div>

 <div class="ChekMarkWrap">
  <input id="chkStage_4" type="checkbox" name="four" /><br />stage
 </div>

新しいチェックボックスを動的に追加するまで、うまく機能します。上記のjqueryスクリプトをバインドしていますdocument.ready()

4

4 に答える 4

3

フィドル: http://jsfiddle.net/3hcFp/2/

このメソッドはclickイベントを 1 回だけバインドするため、そのコードの実行後に追加された要素にはイベントがバインドされません。代わりに、次のようにリスナーを設定する必要があります。

$('body').on('click', 'input:checkbox', function () {
    // Do some stuff
}

フィドルでは、チェックボックスを でラップし、上記の例をそれにform#exampleForm置き換えました。body

編集：チェックボックスを追加するライブの例でフィドルを更新しました。

于 2013-08-12T07:50:51.783 に答える
2

このようにしてみてください：

$("body").on('click',input:checkbox,function () {
    if ($(this).is(":checked")) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).prop("checked", false);
        $(this).prop("checked", true);
    } else {
        $(this).prop("checked", false);
    }
});

新しいコンテンツを追加するときは、それを DOM に追加する必要があります。

ただし、DOM がロードされた後に追加されなかった親要素をターゲットにして、.on()を使用して参照/アタッチ イベントを実行し、コードの最初の行で上に書いたようにセレクターを渡すことができます。

于 2013-08-12T07:48:31.700 に答える
0

委任されたイベントを使用する必要があります。あなたのコードは で実行されていdocument readyます。新しい要素に縛られるものは何もありません。

$("your-form-selector").on('click', ':checkbox', function(){
//your code here.
});
于 2013-08-12T07:50:44.423 に答える
0

デリゲートを使用してみることができます。このようなもの：

$(".ChekMarkWrap").delegate('click','input:checkbox',function () {
    //your functionality
});

参考：jQueryのドキュメント

于 2013-08-12T07:52:01.553 に答える