2

質問のあるフォームがあります。はいと答えると、一連のチェックボックスが表示されます。no と答えた場合、何も起こりません。

<tr>
  <td>Question?</td>
  <td>
    <label><input name="selector" type="radio" value="yes" />Yes</label>
    <label><input name="selector" type="radio" value="no" />No</label>
    <br />
    <div id="subset">
      <label class="disabled"><input name="select1" type="checkbox" value="select1" />option1</label><br />
      <label class="disabled"><input name="select2" type="checkbox" value="select2" />option2</label><br />
      <label class="disabled"><input name="select3" type="checkbox" value="select3" />option3</label><br />
      <label class="disabled"><input name="select4" type="checkbox" value="select4" />option4</label>
    </div>
  </td>
</tr>

<script>
  $(document).ready(function(){
    $('input[name=selector]').click(function(){
      var selector = $(this).val();

      if (selector == 'no') {
        $('#subset label').addClass('disabled');
        $('#subset input').attr('disabled', 'disabled');
        $('#subset input').attr('checked', false);
      } else {
        $('#subset label').removeClass('disabled');
        $('#subset input').removeAttr('disabled');
      }
    });
  });
</script>

このコードは正常に機能しますが、フォームは事前入力できます。その場合、同じように動作する必要があります。yes が選択されている場合、sset が表示されます。

別のコード ブロック (以下を参照) で jQuery を使用してこれを簡単に実行できることはわかっていますが、既存のコードを少し変更するだけでこれを実行できることを望んでいました。

var selector = $('input[name=selector]:checked').val();
if (selector == 'no') {
  $('#subset label').addClass('disabled');
  $('#subset input').attr('disabled', 'disabled');
  $('#subset input').attr('checked', false);
} else {
  $('#subset label').removeClass('disabled');
  $('#subset input').removeAttr('disabled');
}

事前入力は smarty で行われ、すべてのラジオ タグとチェックボックス タグを挿入した以下のコードのようになります。

{{if $array.ELEMENT.answer=='VALUE'}} checked{{/if}}

問題は、多くのコードを追加せずに追加機能を取得するにはどうすればよいかということです。

ありがとう！

4

4 に答える 4

1

クリックイベントをトリガーするだけです..DOM準備完了イベントで..

$(function(){
   $('input[name=selector]').click(function(){
      var selector = $(this).val();

      if (selector == 'no') {
        $('#subset label').addClass('disabled');
        $('#subset input').attr('disabled', 'disabled');
        $('#subset input').attr('checked', false);
      } else {
        $('#subset label').removeClass('disabled');
        $('#subset input').removeAttr('disabled');
      }
    });
    $('input[name=selector]:checked')​.click();​
   // Will trigger the click event on page load
});

したがって、事前に入力されたフォームに基づいて、このイベントはチェックされたアイテムに対してトリガーされます。

フィドルをチェック

于 2012-11-28T18:25:44.240 に答える
0

関数を別のブロックに分離するだけです。

function processForm(){
  var selector = $('input[name=selector]:checked').val();

  if (selector == 'no') {
    $('#subset label').addClass('disabled');
    $('#subset input').attr('disabled', 'disabled');
    $('#subset input').attr('checked', false);
  } else {
    $('#subset label').removeClass('disabled');
    $('#subset input').removeAttr('disabled');
  }
}

その後、直接またはクリックして呼び出すことができます。

于 2012-11-28T18:23:54.877 に答える
0

クリック ハンドラーを関数にリファクタリングし、クリック時とページの読み込み時にそのコードを呼び出すことはできますか?

于 2012-11-28T18:13:27.353 に答える
0

jQuery の を試してくださいtoggleClass。各代替呼び出しでクラスを追加/削除します。詳細については、 http://api.jquery.com/toggleClass/を参照してください。

于 2012-11-28T18:13:28.023 に答える