1

これが私の質問に関連する JSFiddle です。http://jsfiddle.net/kane/MFJUv/

ドロップダウンを表示/非表示にするためにいくつかのことを試しました (div id: machinedropdown)。

ロード時にマシンのドロップダウンを非表示にしたいのですが、ユーザーが「マシン」ラジオボタンを選択すると表示する必要があります。誰かが私に解決策を提案できますか? 

<div data-role="content" id="radio"
    <form>
      <fieldset data-role="controlgroup" data-type="horizontal" class="center-controlgroup">
            <input name="radio-choice-h-6" id="radio-choice-h-6a" type="radio" checked="checked" value="on">
            <label for="radio-choice-h-6a">Run</label>
            <input name="radio-choice-h-6" id="radio-choice-h-6b" type="radio" value="off">
            <label for="radio-choice-h-6b">Swim</label>

            <!-- ON SELECT I NEED TO HIDE THE "div id = "machinedropdown" -->
            <input name="radio-choice-h-6" id="radio-choice-h-6c" type="radio" value="off">
            <label for="radio-choice-h-6c">Machine</label>
         </fieldset>
</form>
</div>

<div data-role="content" id="machinedropdown"
  <label class="select" for="select-choice-1">Select, native menu</label>
        <select name="select-choice-1" id="select-choice-1">
        <option value="standard">Machine 1</option>
        <option value="rush">Machine 2</option>
        <option value="express">Machine 3</option>
        <option value="overnight">Machine 4</option>
  </select>
</div>
4

1 に答える 1

3

これを行う 1 つの方法は、無線がチェックされているかどうか、およびそれがマシン固有の ID を含む要素であることを確認することです。

まず、ドロップダウンの初期状態を非表示に設定します。

$('#machinedropdown').hide();

次に、ラジオ入力の変更イベントをリッスンします。入力が両方ともチェックされ、machine入力に固有の ID ( radio-choice-h-6c) を持っている場合は、ドロップダウンを表示するように設定します。それ以外の場合は、非表示に戻します (選択したラジオ ボタンmachineを別のオプションに変更すると、ドロップダウンはまだ表示されません):

$('input').change(function(){ // On change of radio buttons
    if ($(this).is(':checked') && $(this).attr('id') == 'radio-choice-h-6c') {
      $('#machinedropdown').show();
      // If the radio button is checked and has the machine id, show the drop down.
    }
    else {
      $('#machinedropdown').hide();
      // Else, re-hide it.
    }
});

ここでjsFiddle。

于 2013-05-20T00:06:40.477 に答える