【JQuery】構文一覧

呼び出し

JQueryのAPIを参照する。

• <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

初期表示時

  $(document).ready(function(){
          // 処理
  });

ボタン押下時

$(function ($) {
    $('.conditionButton').on('click',function(){
          // 処理
    });
});

要素指定

クラスセレクタ

    $('.className')

親要素

    $(セレクタ).parent()

孫要素

    $(セレクタ).find(セレクタ)

属性変更

    $(セレクタ).prop("要素名", 値)

ラジオボタンによってテキストの活性／非活性を切り替える。

• 3番目のラジオボタンをクリックした場合, 1-1, 1-2, 2-1, 2-2のテキストボックスが非活性になる。

JQuery

$(function ($) {
    // 指定したクラスを持つ要素のonclick属性に下記を設定する。
    $('.conditionButton').on('click',function(){
        // 選択されている場合、その親の要素(parent)から見た子(find)のうちtext属性をすべて活性化させる。
        $("input[class='conditionButton']:checked").parent().find(":text").prop("disabled", false);
        // それ以外をすべて非活性にする。
        $("input[class='conditionButton']:not(:checked)").parent().find(":text").prop("disabled", true);
    });
});

HTML

<div>
  <input type="radio" class="conditionButton" name="test1" checked>
  <input type="text" value="テキスト１-１" />
  <input type="text" value="テキスト１-２" />
  <label>ラベル1</label>
</div>
<div>
  <input type="radio" class="conditionButton" name="test1">
  <input type="text" value="テキスト２-１" />
  <input type="text" value="テキスト２-２" />
  <label>ラベル2</label>
  </div>
<div>
  <input type="radio" class="conditionButton" name="test1">
  <input type="text" value="テキスト３-１" />
  <input type="text" value="テキスト３-２" />
  <label>ラベル3</label>
</div>

参考サイト

公式 : http://semooh.jp/jquery/