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 value=1）。

当条件达到时，我如何（也许使用 jquery）启用按钮btn ？

PS。我完全控制了 PHP 代码，所以如果您认为对 php 代码进行一些修改可以简化前端编码，请随意提出建议。

4

5 回答 5

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 回答
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处理程序绑定到每个按钮。单击一个时，会遍历所有必需的单选按钮，并计算是否单击了足够的“是”单选按钮。如果是这样，它启用按钮，否则禁用它。我敢肯定它可以稍微清理一下，或者提高效率，但这似乎是预期的。

于 2013-06-13T18:29:04.113 回答
0

只需添加以下javascript，代码注释中有解释

$('input[type="radio"]').change(function ()
{
   var req,reqYes;
   req=$('input[type="radio"][data-req="1"][value="1"]').length;
   reqYes=$('input:checked[type="radio"][data-req="1"][value="1"]').length;
   document.getElementsByName("btn")[0].disabled= (req!=reqYes);
   return true;
 }
);

/* - Is onchange because it happens after the click once the radiobutton state has been changed 
   - Is getElementsByName()[0] because you used the name instead the ID (The id is unique, but not the name so it returns an array of objects)
   - No need to do a foreach since you can check the Radiosbutton required and the Required with yes answer, the foreach is done by Jquery
**/

在这里摆弄http://jsfiddle.net/egorbatik/pVh4U/

于 2013-06-13T18:43:05.393 回答
0

如果每个组只包含是/否，那么您只需检查以确保选中的是无线电的数量是所需无线电总数的一半

$(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);
    });
});

小提琴

只是想到了这一点-您也可以根据 data-req=1 和 value=1 的元素数量检查已检查 YES 的数量

$(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 回答
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 回答