Question

我有一个页面$(document).ready，调用一个javascript函数，通过对服务器的ajax调用，根据页面请求的上下文动态创建一些输入控件。

我需要设置一个默认情况下要检查的动态创建的控件（输入复选框）。

我在调用服务器之后尝试通过$(#id).prop('checked', true);设置它，但它不起作用。我猜这个领域还不存在......

如何修改从ajax调用动态创建的html控件？

Answer 1

不是先使用prop对其进行检查，而是在HTML中设置checked。

<input type="checkbox" id="#" value="sample" checked>

这可以静态或动态完成。只需添加checked作为动态生成的一部分。然后引入prop以满足您的需求。

Answer 2

您可以使用attr和removeAttr方法检查/取消选中复选框/电台输入。

// to check a checkbox or radio button
$(selector).attr("checked","checked");

// to uncheck a checkbox (radio button will be cleared on another check)
$(selector).removeAttr("checked");

如果您要从AJAX创建输入，则可以在更新DOM后将其添加到AJAX success或complete函数。但@Aaron是对的，在服务器端设置生成值更有效。

Answer 3

提供的答案很好，可以工作但不能解决我的问题。这是因为生成这些html元素的javascript是一个抽象文件，可以为许多不同的应用程序生成html输入控件。我无法修改该文件以专门检查一个案例的复选框。

我所做的是，在这个通用javascript文件中，如果在当前上下文中存在，则调用setDefaults()方法。因此，在生成html之后，此脚本的调用者可以选择实现将由通用脚本调用的setDefaults（）。

function initReport(reportID) {
    //request the data needed to create the dynamic html from the server:
    $.ajax({
        type: "GET",
        url: "/report.aspx/GetReportDetails?reportID=" + reportID,
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    }).done(function (result) {
        reportFormData = JSON.parse(result.d);
        //request our generic html template:
        $.ajax({
            type: "GET",
            url: "/assets/modules/report/Templates/Form.html"
        }).done(function (result) {
            $("#Form").html(result);
            //generate html from server data:
            buildViewModel(reportFormData);
            buildPage(reportFormData);
            kendo.bind($("#Form"), viewModel);
            //call "setDefaults" function only if it has been defined (in the current report template)
            if (typeof setDefaults === "function")
            {
                setDefaults();
            }
        });
    }).fail(function (jqXHR, textStatus, err) {
        console.log("An error has occurred: " + err);
    });
...
}

设置<input />通过jquery（selector）.prop（）函数检查不适用于动态html

3 个答案: