0

別のラジオ グループに対するユーザー アクションのために別のスクリプトによってチェックされていないラジオ グループに、Jquery を使用してデフォルト値を割り当てるにはどうすればよいですか?

ページ上の 1 つのイメージのみに、値「primary」または「secondary」を割り当てることができます。ただし、下の 2 つの値 (「保持」または「削除」) は排他的ではなく、ページ上の任意の画像に適用できます。列は、通常のラジオ ボタン グループの動作によって制御されます。

jQuery による双方向の排他性があります。( http://css-tricks.com/radio-buttons-with-2-way-exclusivity/ )

<div class="dlab-image-blocks text-center"><img width="150" height="150" src="http://mrtwebdesign.local/ddd/wp-content/uploads/2013/02/Desert1-150x150.jpg" class="attachment-thumbnail" alt="Desert">
  <div class="dlab-ctrl btn-group btn-group-vertical padtop20">
    <label class="btn btn-primary">
      <input type="radio" id="primary871" name="col-871 " class="rbtn" data-row="1" value="primary">Primary
    </label>
    <label class="btn">
      <input type="radio" id="secondary871" name="col-871 " data-row="2" class="rbtn" value="secondary">Secondary
    </label>
    <label class="btn keep">
      <input type="radio" id="keep871" name="col-871 " class="rbtn keep" value="keep" checked="checked">Unused, but keep
    </label>
    <label class="btn">
      <input type="radio" id="delete871" name="col-871 " class="rbtn" value="delete">Delete image
    </label>
  </div> <!-- dlab-ctrl btn-group btn-group-vertical padtop20 -->
</div>

割り当てたいデフォルト値は、値が「keep」の入力用です。私はそれを選択するいくつかの異なる方法を持っています..しかし、スクリプトをトリガーするページ上のアクションは、別のラジオグループになります.

<script>
    $('label').click(function() {
        if ($('input:radio[name|="col"]').length == 0){
           $(this).filter(".keep").attr('checked',true);
        }
    });
</script>

これは、クリックされたラジオボタングループ内でのみ機能すると思います。ただし、クリックは常に別のグループになります。

+++++++++++++++++++++++++++++++++++++++ アップデート。JSFIDDLE の例: http://jsfiddle.net/mrtwebdesign/fQUX3/

+++++++++++++++++++++++++++++++++++++++ 私の最新の試み。ページ上の他の作業スクリプトを適応させようとしました。私が何をしているのかまだわかりません。

上記のjsfiddleリンクを更新しました

setTimeout(function() {
    var attached, elm;
    $("input[type=radio]").click(function () {
        elm = $(this);
        attached = elm.data("attached");
        if ($("input[data-attached=" + attached + "]").length == 0){
        elm.filter('.keep').prop("checked", true);
        }
    });
},500);
4

1 に答える 1

0

さらに数時間の実験の後、ついにそれを理解しました。

jsfiddle を作業バージョンにリベースしました。 http://jsfiddle.net/mrtwebdesign/fQUX3/

そう..それを単一のスクリプトにまとめることができました。一致する値に「data-row=」が設定されたラジオ ボタンのセットに双方向の排他性を適用します。グループが未チェックになってしまった場合。「keep」のクラスを持つそのグループのラジオ ボタンがチェックされます (つまり、デフォルト値)。

var row, el, groupName;

$("input[type=radio]").click(function() {
    el = $(this);
    row = el.data("row");
    $("input[data-row=" + row + "]").prop("checked", false);
    el.prop("checked", true);
    groupName = $(this).attr("name");
    $(".rbtn").each(function(idx)
     {
         if($(this).attr("name") != groupName)
         {
         $(this).filter(".keep").prop("checked", true);
         }
     });
});
于 2013-03-19T09:40:33.307 に答える