2

私はjQueryを初めて使用するので、明らかな見落としがある場合はお詫びしますが...ユーザーがチェックボックスをクリックしたときにフォームの一部を非表示にしたいだけです。

そこで、この小さな jQuery スクリプトを書きました。

$("#belonging_entire_world").toggle(function() {
            $("#access_for_friends, #access_for_groups").fadeOut();
        }, function(){ 
            $("#access_for_friends, #access_for_groups").fadeIn();
});

ID「belonging_entire_world」でタグ付けされたチェックボックスをクリックすると、必要なフォームの部分(#access_for_friendsと#access_for_groupsで表される部分)が非表示になり、もう一度クリックすると、この部分が再び表示されますが、チェックボックス「belonging_entire_world」 「私がチェックしたことは常に視覚的にチェックされていないままです...

スクリプトの実行後にfirebugを開くと、チェックボックスにchecked=checked属性があることがわかります...それでも、ブラウザではチェックされていないように見えます（すべてのブラウザで！）...

トグル関数の最初の関数に次を追加しようとしました：

$("#belonging_entire_world").attr('checked', true);

それでも...チェックされていないかのように残っています...

これは私を夢中にさせています。jQueryコードを削除する別のオプションが表示されません。本当に理解できません...ビューの一部の下に置きます：

<div id="Belonging-Access-Control">
      <h2> Who will be able to see & access this? </h2>
      <div class="field" id="entire_world">
        <%= f.check_box(:entire_world) %>
        <%= f.label(:entire_world, "The entire world!") %>
      </div>

      <div class="field" id="access_for_friends">
        <%= f.check_box(:access_for_friends) %>
        <%= f.label(:access_for_friends, "My friends") %>
      </div>

チェックボックスをオンにした後のページのHTML（firebug出力）：

<div id="Belonging-Access-Control">
<h2> Who will be able to see &amp; access this? </h2>
<div id="entire_world" class="field">
<input type="hidden" value="0" name="belonging[entire_world]">
<input id="belonging_entire_world" type="checkbox" value="1" name="belonging[entire_world]" checked="checked">
<label for="belonging_entire_world">The entire world!</label>
</div>
<div id="access_for_friends" class="field" style="display: none;">
<input type="hidden" value="0" name="belonging[access_for_friends]">
<input id="belonging_access_for_friends" type="checkbox" value="1" name="belonging[access_for_friends]">
<label for="belonging_access_for_friends">My friends</label>
</div>
4

2 に答える 2

1

.toggle() の使用に問題があるようです。この機能を使ってもよろしいでしょうか?:

$("#belonging_entire_world").click(function() {
    if (this.checked) {
        $("#access_for_friends, #access_for_groups").fadeOut();
    } else {
        $("#access_for_friends, #access_for_groups").fadeIn();
    }
});

反対のフェードが必要な場合は、フェードを切り替えることができます。チェックボックスが「チェック済み」として始まる場合、これはより良い解決策かもしれません。したがって、このコードは、チェックボックスの状態に基づいて、他の div を非表示/表示します。切り替えの段階ではありません。

于 2012-06-27T14:29:33.210 に答える
-1

.toggle（）は機能しますが、私が個人的に好むもう1つの方法は、チェックボックスの状態を確認することです。

このようにして、さまざまな条件付きイベントをチェーンして、フォーム内の余分な部分を表示/非表示にすることができます。

于 2012-06-27T15:10:10.600 に答える