禁用按鈕，直到選擇了AJAX生成的單選按鈕

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

所有這些都像魅力一樣。 我只是想“驗證”這種動態生成的表格。 在選擇了所有自動生成的單選按鈕之前，我不希望能夠按下“ Submit按鈕。

Answer 1

從禁用按鈕開始

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

然后，當您檢查完所有按鈕都被選中后，請刪除Disabled屬性。

$('#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>

輸入是自閉標簽，通常不包裝文本值。