禁用提交按钮，直到选中一组动态创建的单选按钮中的一个

Question

I would like to disable a submit button until one of a group of radio buttons is selected. I know there are similar questions out there, but none pertain to a dynamically-created group of radio buttons...

Here is what I have.. a script at the top of the page generates a number of buttons given a user upload in a previous view:

var jScriptArray = new Array(@ViewBag.ColNames.Length);
var array = @Html.Raw(Json.Encode(ViewBag.ColNames));
for( var i = 0; i < @ViewBag.ColNames.Length; i++ ) {
    jScriptArray[i] = array[i];
}
var length = @(ViewBag.NCols);
$(document).ready(function () {
     for (var i = 0; i < length; i++) {
           $('#radioGroupBy').append('<input id="grp' + i +'" type="radio" name="group" value="'+i+'">'+jScriptArray[i]+'</input>')
           $('#radioGroupBy').append('<p style="padding:0px;margin:0px;"></br></p>');
     }
});

This works, and selecting any of the buttons returns the proper value; great. However, I want to disable the submit button until one of these radio buttons is selected. Using an answer I found on SO earlier, I created the following (this works, but only if I hard code the group of buttons. The issue is it won't work with the Javascript-created group):

var $radioButtons = $("input[name='group']");
    $radioButtons.change(function () {
        var anyRadioButtonHasValue = false;
        // iterate through all radio buttons
        $radioButtons.each(function () {
            if (this.checked) {
                // indicate we found a radio button which has a value
                anyRadioButtonHasValue = true;
                // break out of each loop
                return false;
            }
        });
        // check if we found any radio button which has a value
        if (anyRadioButtonHasValue) {
            // enable submit button.
            $("input[name='submitbtn']").removeAttr("disabled");
        }
    });

Also, for the sake of thoroughness, here is the submit button:

<input id="submitbtn" name="submitbtn" type="submit" value="Drill Down" disabled="disabled" />

Thanks so much!

Answer 1

Event delegation (also, use .prop() when removing the disabled property to the submit button)

$("#radioGroupBy").on("change", ":radio[name=group]", function() {
    var $radioButtons = $(":radio[name=group]");
    var anyRadioButtonHasValue = false;
    // iterate through all radio buttons
    $radioButtons.each(function () {
        if (this.checked) {
            // indicate we found a radio button which has a value
            anyRadioButtonHasValue = true;
            // break out of each loop
            return false;
        }
    });
    // check if we found any radio button which has a value
    if (anyRadioButtonHasValue) {
        $("input[name='submitbtn']").prop("disabled", false);
    }
});

Answer 2

I figured it out. As Benjamin suggested in comments above, the latter script was executing before the DOM was ready. I solved it by just surrounding the whole script in $(window).load... :

$(window).load(function () {
    var $radioButtons = $("input[name='group']");
    $radioButtons.change(function () {
        var anyRadioButtonHasValue = false;
        // iterate through all radio buttons
        $radioButtons.each(function () {
            if (this.checked) {
                // indicate we found a radio button which has a value
                anyRadioButtonHasValue = true;
                // break out of each loop
                return false;
            }
        });
        // check if we found any radio button which has a value
        if (anyRadioButtonHasValue) {
            // enable submit button.
            $("input[name='submitbtn']").removeAttr("disabled");
        }
    });
});