1

すべてのラジオ ボタン (必須) が選択されているときに、ボタンを有効にする必要があります。固定数のオプション（ラジオボタンのカップル、はいまたはいいえ）でこれを行う方法のアイデアがあります。問題は、フォームがphpを使用して動的に生成され、ユーザーがラジオボタンを使用して「はい」または「いいえ」と答える必要がある「質問」の量が不明であることです。

これは、生成された html サンプル コードです。

<form>
  Generic Privacy Policy
  [*]static global opt1
  <input type="radio" name="ppopt1" value="0" data-req="1"> No
  <input type="radio" name="ppopt1" value="1" data-req="1"> Yes
  [*]static global opt2
  <input type="radio" name="ppopt2" value="0" data-req="1"> No
  <input type="radio" name="ppopt2" value="1" data-req="1"> Yes
  static global opt3
  <input type="radio" name="ppopt3" value="0" data-req="0"> No
  <input type="radio" name="ppopt3" value="1" data-req="0"> Yes
  static global opt4
  <input type="radio" name="ppopt4" value="0" data-req="0"> No
  <input type="radio" name="ppopt4" value="1" data-req="0"> Yes
  <button name="btn" type="button" disabled>Send!</button>
</form>

ご覧のとおり、 data-reqを使用して、質問に必要な回答と回答が必要かどうかを指定します (また、Yes 値 = 1 である必要があります)。

どのように（おそらくjqueryを使用して）条件が達成されたときにボタンbtnを有効にできますか？

PS。私は PHP コードを完全に管理しています。したがって、PHP コードの一部を変更することでフロントエンドのコーディングを簡素化できると考えられる場合は、自由に提案してください。

4

5 に答える 5

1

これが私がそれについて行く方法です：

$(document).ready(function () {
    var $form = $("form"),
        $button = $form.find("button"),
        $radios = $form.find('input[type="radio"]'),
        $requiredRadios = $radios.filter('[data-req="1"]');

    $requiredRadios.on("click", function () {
        var numValid = 0;

        $requiredRadios.each(function () {
            var $this = $(this),
                myName = $this.attr("name"),
                isYes = ($this.val() === "1"),
                $target = (isYes ? $this : $radios.filter('input[name="' + myName + '"][value="1"]'));

            if ($target.prop("checked")) {
                numValid++;
            }
        });

        if (numValid === $requiredRadios.length) {
            $button.prop("disabled", false);
        } else {
            $button.prop("disabled", true);
        }
    });
});

デモ: http://jsfiddle.net/aCheQ/1/

必要なすべてのラジオ ボタンを見つけて、clickハンドラーをそれぞれにバインドします。1 つがクリックされると、必要なすべてのラジオ ボタンを調べて、十分な「はい」ラジオ ボタンがクリックされたかどうかをカウントします。その場合はボタンを有効にし、そうでない場合は無効にします。少しクリーンアップするか、より効率的にすることができると確信していますが、それは期待されているようです.

于 2013-06-13T18:29:04.113 に答える
1 
$(function() {
    $("input[type='radio']").click(function(){
        $requires = $('input:radio[data-req=1][value=1]');

        var checked = 0;
        $requires.each(function () {
            if($(this)[0].checked)
                $("button").attr("disabled", (++checked < $requires.length));
        });
    });
});

jsFiddle コード

于 2013-06-13T18:50:18.960 に答える
0

完全にテストされたコードと動作

    $("input[type='radio']").click(function(){
    var enableButton = false;
    var totalChecked = 0;
  var reqElements  =  $('input:radio[data-req =1]');
    var reqElementsCount= $("input:radio[data-req =1][value=1]").size();
    $(reqElements).each(function (index, ele) {
        if($(ele).is(":checked") && ele.value === "1"){
           totalChecked++;
        }
    });
    if(totalChecked == reqElementsCount){ 
        $("button").removeAttr("disabled");
    }
    else{
         $("button").attr("disabled",true);
    }
});

JSFiddle でのデモ

于 2013-06-13T18:18:34.633 に答える
0

各グループに yes/no のみが含まれる場合は、チェックされた yes 無線の数が必要な無線の合計の半分であることを確認できます。

$(function () {
    var req = $('input[data-req=1]');
    req.change(function () {
        // if the checked radios with value=1 amount == half of the total required (because only Yes or No can be checked)
        var allchecked = req.filter('[value=1]:checked').length == req.length/2
        // disable of not all checked - enable if all checked
        $('button').prop('disabled', !allchecked);
    });
});

フィドル

代わりにグループの数を確認したい場合は、ループして個別の入力名を取得できます

$(function () {
    var req = $('input[data-req=1]');
    var groups = [];
    req.each(function(i,v){
        // if group name not in array add it
        if($.inArray(v.name,groups) == -1){
            groups.push(v.name);
        }
    });
    req.change(function () {
        // if the checked amount == number of groups
        var allchecked = req.filter('[value=1]:checked').length == groups.length;
        // disable of not all checked - enable if all checked
        $('button').prop('disabled', !allchecked);
    });
});

フィドル

これを考えてみてください-チェックされたYESの数を、data-req = 1およびvalue = 1の要素の数に対してチェックすることもできます

$(function () {
    var req = $('input[data-req=1]');
    req.change(function () {        
        var allchecked = req.filter('[value=1]:checked').length == req.filter('[value=1]').length;
        $('button').prop('disabled', !allchecked);
    });
});

フィドル

于 2013-06-13T18:54:13.697 に答える