javascript - ラジオボタンが選択されていない限り、チェックボックスをグレーアウトする方法は?

Question

JavaScript は非常に新しいものですが、私が始めるための助けをいただければ幸いです。私は単純なフォームを持っています:

<div><input type="radio" name="o1" id="burger" />Burger</div>
<div id="yesFries"><input type="checkbox" name="e1" id="fries" />Fries with that?</div>
<div><input type="radio" name="o1" id="pizza" />Pizza</div>
<div><input type="radio" name="o1" id="hotdog" />Hot Dog</div>

「バーガー」ラジオボタンが選択されていない限り、「フライドポテト」チェックボックスをグレー表示にしたい。Javascript と CSS のどちらが最適かはわかりません。前もって感謝します！

score 3 · Accepted Answer

あなたがしたいことは、ラジオの状態が変わるまで要素を無効に設定することです。それはjavascriptで行われ、それからラジオボタンのonchangeで無効なクラスを追加/削除します。

どのjavascriptライブラリを使用することを検討していますか？jQueryはこれをかなり簡単にします。

$('#burger').change( function () {
    if ($('#burger').checked() ) {
        $('#fries').removeClass('disabled');
    } else {
        $('#fries').addClass('disabled');
    }
});

score 3 · Accepted Answer

実際には、少し CSS3 を使用すると、非常に単純なソリューションをモックアップできます。ここではボタンをグレーアウトしませんが、チェックボックスがチェックされている場合にのみ表示されるようにします。ただし、この例の上にもう少し CSS を追加してグレー表示にすることもできます。どのようなサポートを提供したいかを常に考える必要があります。ただし、最新のブラウザーで問題なく動作する場合は、試してみてください。

ここにHTMLがあります

<label>
    <input type="checkbox" name="test" />
    <span>I accept terms and cons</span><br><br>
    <button>Great!</button>
</label>

ここにCSSがあります

button { display: none}
:checked ~ button {
    font-style: italic;
    color: green;  
    display: inherit;
}

そして、ここにデモhttp://jsfiddle.net/DyjmM/があります

score 2 · Accepted Answer

非常に使いやすいJavascriptライブラリであるjQuery （初心者には強くお勧めします）を使用している場合scriptは、ページ内のタグに次のコードを追加することで、2つのステップでこれを行うことができます。

$(function(){
    $("#burger").change(function() {
        if ($(this).is(':checked')) $("#fries").removeAttr("disabled");
        else $("#fries").attr("disabled", true);
    });
});

このコードは3つのことを行います。

changeのイベントをリッスンします#burger。
変更が発生した場合は、付属のを実行してfunctionください。
その関数で、のdisabled属性#friesをのcheckedプロパティに設定します#burger。

score 2 · Accepted Answer

jQuery を使用できるかどうかを指定していないことに気付きました。それがオプションである場合は、他の投稿のいずれかを参照してください。強くお勧めします。

jquery を使用できない場合は、次のことを試してください。

<script>
  function setFries(){
    var el = document.getElementById("burger");
    if(el.checked)
      document.getElementById("fries").disabled = false;
    else
     document.getElementById("fries").disabled = true;    
  }  
</script>


<div><input type="radio" name="o1" id="burger" onchange="setFries();"/>Burger</div>
<div id="yesFries"><input type="checkbox" name="e1" id="fries" disabled="disabled"/>Fries with that?</div>
<div><input type="radio" name="o1" id="pizza" onchange="setFries();"/>Pizza</div>
<div><input type="radio" name="o1" id="hotdog" onchange="setFries();"/>Hot Dog</div>

jsFiddle の簡単な例

score 0 · Accepted Answer

関数ライブラリなしでこれを試すことはできません

<input type="checkbox" name="e1" id="fries" disabled />

JS

window.onload=function(){
    var radios=document.getElementsByName('o1');
    for(i=0;i<radios.length;i++) radios[i].onclick=checkFire;
};

function checkFire(e)
{
    var fires=document.getElementById('fries');
    var evt=e||window.event;
    var target=evt.target||evt.srcElement;
    if(target.checked && target.id==='burger') fires.disabled=false;
    else 
    {
        fires.checked=false;
        fires.disabled=true;
    }
}

デモ。

score 0 · Accepted Answer

JQuery を使用する

$().ready(function() {
  var toggleAskForFries = function() {
    if($('#burger').is(':checked')) {
      $('#yesFries').show()
    else
      $('#yesFries').hide()
    }
    return false
  }
  toggleAskForFries()
  $('#burger').change(toggleAskForFries)
}

score 0 · Accepted Answer

0

jQuery の使用: http://jsfiddle.net/kboucher/cMcP5/ (ラベルにもラベルを追加)

于 2012-10-02T17:27:20.067 に答える

javascript - ラジオボタンが選択されていない限り、チェックボックスをグレーアウトする方法は?

7 に答える 7

Related

Reference