Question

我的网页上有一个静态提交按钮。

我进行AJAX调用，生成一个单选按钮列表。单选按钮的数量是随机的，全部取决于JSON对象中的项目数。

我想在确认提交按钮之前验证是否已选择所有生成的单选按钮。

目前我的HTML看起来像这样：

<div id="toDo" class="col-sm-6 text-center">
    <div id="manualChecks" class="panel panel-default">
        <div class="panel-heading text-center"><strong>Manual Check</strong</div>
    </div>
    <span class="input-group-btn">
        <button type="submit" class="btn btn-primary">Submit</button>
    </span>
</div>

我的ajax读取.JSON文件并通过以下javascript生成复选框列表：

var ul = $('<ul class ="list-group text-left">');

            $.each(item, function (key, value) {
                var li = $('<li class="list-group-item">').append(
                    $('<input type="radio">' + value.Description + '</input>')
                );

                li.appendTo(ul);    
            });

            $('#manualChecks').append(ul);
        }

所有这些都像魅力一样。我只是想＆＃34;验证＆＃34;这种动态生成的形式。我不希望能够按下Submit按钮，直到选择了所有自动生成的单选按钮。

Answer 1

首先禁用按钮

<button id="submitBtn" disabled="disabled" type="submit" class="btn btn-primary">Submit</button>

然后，当您确认已选中所有按钮时，请删除已禁用的属性。

$('#submitBtn').removeAttr('disabled');

要检查所有按钮是否已选中，您需要为此编写一些逻辑。只需在单选按钮上添加一个处理程序以监听它们何时被更改，然后全部选中它们并查看未选中的数字是否为=== 0.

Answer 2

在AJAX请求开始之前禁用按钮。

将一个事件委托给表单，以检查列表中单选按钮上的更改事件。

var $submit = $('#submitBtn');
var $todo = $('#toDo');
$todo.on('change', 'input[type="radio"]', function (e) {
   var unCheckedInputs = $todo.find('input[type="radio"]:not(:checked)');

   if (unCheckedInputs.length === 0) {
      $submit.prop('disabled', false);
   }
});

请注意您的输入格式不正确。你正在生成看起来像这样的代码

<input type="radio">Some Label</input>

你想要做的是像

<label>
   Some Label
   <input type="radio" value="" />
</label>

输入是自闭标签，通常不包装文本值。

禁用按钮，直到选择了AJAX生成的单选按钮

2 个答案: