1

次のコードは for ループによって生成されます。

<form action="saveresponse.php" method="POST" name="mainForm">

<input class="cbox_yes" type="checkbox" name="yes[]" value="01.jpg"
onclick="spenable()" /> OK
<input class="cbox_sp" type="checkbox" name="sp[]" value="01.jpg" disabled />Special<br />

<input class="cbox_yes" type="checkbox" name="yes[]" value="02.jpg"
onclick="spenable()" /> OK
<input class="cbox_sp" type="checkbox" name="sp[]" value="02.jpg" disabled />Special<br />

etc etc upto n times...

ここで、ページの読み込み時に、対応する yes[] チェックボックスがユーザーによってチェックされている場合にのみ、すべての sp[] チェックボックスを無効にして有効にする必要があります。

私が使用しているJavascriptコード：（JSがyes []チェックボックスの状態をキャプチャしているかどうかを確認するだけですか？

function spenable(){
        var yes = document.mainForm.yes[].value;
            if (yes == true)
                //alert("true");
                document.mainForm.yes[].value = checked;
            else
                //alert("false");
                document.mainForm.yes[].value = checked;
        };
    };

しかし、私は何の警告も受けていません（はいでもいいえでもありません）。

では、2 行目の yes[] (角かっこ) は間違っていますか? または、JS で if/else 条件が間違っていますか?

PS SO または Google でのすべての質問は、1 つのケース/ペアのみを扱います。
PS 必要に応じて、yes[] を yes1、yes2、yes3 などに変更し、対応する sp1、sp2、sp3 を変更できます。ここで、1,2,3 は For ループの $i ですが、JS でどのようにキャプチャ/参照しますか?

_更新: _

フロー/条件は次のとおりです (明確化):
最初は [特別] チェックボックスが無効になり、[OK] チェックボックスがオフになります。
次に、ユーザーが [OK] をチェックすると、Special が有効になります。
ユーザーが望むなら、彼は特別にチェックを入れることができます。
後でユーザーが気が変わって OK のチェックを外した場合、Special のチェックを外して再び無効にする必要があります。

4

3 に答える 3

4

ここでは、簡単にするために jQuery を使用しました。

$("input[name='yes[]']").change(function() {      //When checkbox changes
    var checked = $(this).attr("checked");
    $(this).next().attr("disabled", !checked);    //The next checkbox will enable
});​                                               // or disable based on the
                                                  // checkbox before it

デモ: http://jsfiddle.net/DerekL/Zdf9d/
純粋な JavaScript: http://jsfiddle.net/DerekL/Zdf9d/1/

アップデート

特別なチェックボックスがチェックされている場合、最初のチェックボックスのチェックを外します。
純粋な JavaScript: http://jsfiddle.net/DerekL/Zdf9d/2/

その他のアップデート

デモは次のとおりです:
Pure JavaScript: http://jsfiddle.net/DerekL/Zdf9d/3/
jQuery: http://jsfiddle.net/DerekL/Zdf9d/4/

ちょっとした注意: document.querySelectorAllIE8 を含むすべての最新のブラウザーと IE8+ で動作します。IE6 をサポートする場合は、常にjQueryを使用することをお勧めします。

于 2012-06-29T17:37:31.330 に答える
2

jQuery の使用に慣れている場合:

$('input[type="checkbox"]').click(function(){
    var obj = $(this);
    obj.next('.cbox_sp').attr({'disabled':(obj.is(':checked') ? false : 'disabled')});
});

このソリューションは、onclickすべてのチェックボックスにイベント ハンドラーを割り当て、対応する「特別な」チェックボックスを無効にする必要があるかどうかを確認します。また、デフォルトのチェック状態を true に設定します。

作業例: http://jsfiddle.net/6YTqC/

于 2012-06-29T17:47:21.127 に答える
2

Javascript では識別子として使用できないためyes[]、名前を文字列として使用してフィールドにアクセスする必要があります。

document.mainForm["yes[]"]

これは単一の要素を返すのではなく、要素の配列を返します。インデックスを使用して特定の要素にアクセスします。

document.mainForm["yes[]"][0]

valueチェックボックスが選択されているかどうかに関係なく、チェックボックスの値は常にプロパティになります。checkedプロパティを使用して、選択されているかどうかを確認します。

function spenable() {
  var yes = document.mainForm["yes[]"][0].checked;
  if (yes) {
    alert("true");
  } else {
    alert("false");
  };
}

クリックされた特定のチェックボックスにアクセスするには、イベント呼び出しでチェックボックスのインデックスを送信します。

<input class="cbox_yes" type="checkbox" name="yes[]" value="01.jpg" onclick="spenable(0);" /> OK

関数でインデックスを使用します。

function spenable(idx) {
  var yes = document.mainForm["yes[]"][idx].checked;
  var sp = document.mainForm["sp[]"][idx];
  sp.disabled = !yes;
}
于 2012-06-29T17:40:25.257 に答える