我看到了一个代码,该代码按值检查单选按钮,但是如何按id进行检查呢?我目前的情况是,我使用ajax附加html代码来填充表格。在构建html表时,我在循环某项商品的价格。之后,我需要检查默认标志等于“ Y”的价格单选按钮。

这是我的if语句,它仅按值检查单选按钮,但由于我的单选按钮值为null,只有id和name才具有值,因此这尚不起作用:

if (item.defaultflag == 'Y')
    $('#divItemPrice').find(':radio[name=rbDefaultPrice][value="iPrice_' + item.channelid + '"]').prop('checked', true);
else
    $('#divItemPrice').find(':radio[name=rbDefaultPrice][value="iPrice_' + item.channelid + '"]').prop('checked', false);


完整的代码:

$.ajax({
    url: '/Item/RetrievePrice',
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify(json),
    contentType: 'application/json; charset=utf-8',
    cache: false,
    async: true,
    success: function (data) {
        var trHTML = "";
        debugger;
        trHTML = '<tbody id="dbBody2">';
        $.each(data, function (i, item) {
            trHTML += '<tr><td class="hidden">' + item.itemid + '</td>' +
                      '<td style="width:20px"><label><input type="radio" name="rbDefaultPrice" id = "iPrice_' + item.itemid + '" /></label></td>' +
                      '<td>' + item.itemprice + '</td>' +
                      '<td>' + ToJavaScriptDate(item.startdate) + '</td>' +
                      '<td>' + ToJavaScriptDate(item.enddate) + '</td>' +
                      '</tr>';

            //How do I check the radiobutton by id?
            if (item.defaultflag == 'Y')
                $('#divItemPrice').find(':radio[name=rbDefaultPrice][value="iPrice_' + item.itemid + '"]').prop('checked', true);
            else
                $('#divItemPrice').find(':radio[name=rbDefaultPrice][value="iPrice_' + item.itemid + '"]').prop('checked', false);
        });

        trHTML += '</tbody>';
        $("#tblItemPrice tbody").remove();
        $('#tblItemPrice').append(trHTML);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("Error! " + xhr.status);
    }
});


查看(模态部分)

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
        <div id="divItemPrice" class="" style="border: 0px solid green; ">
            <table id="tblItemPrice" onclick="gettabledata('tblItemPrice', '0,2,3,4', 'itemPriceId,itemPrice,strtDt,endDt')" class="table table-hover table-bordered table-striped bootgrid-table" aria-busy="false" padding-left:10px;">
                <thead>
                    <tr class="inner-table-head">
                        <th class="hidden">
                            @Html.DisplayNameFor(model => model.itemPriceId)
                        </th>
                        <th>
                            Price
                        </th>
                        <th>
                            Start Date
                        </th>
                        <th>
                            End Date
                        </th>
                    </tr>
                </thead>
                <tbody id="bodyToAppend">

                </tbody>
            </table>
        </div>
        <div class="form-group">
            <div class="row form-row">
                <span class="form-item">
                    @Html.HiddenFor(m => m.itemPriceId)
                    @Html.LabelFor(m => m.itemPrice, new { @class = "lbl-width" })
                    @Html.TextBoxFor(m => m.itemPrice, new { @class = "form-control input-sm" })
                </span>
            </div>
            <div class="row form-row">
                <span class="form-item ">
                    @Html.LabelFor(m => m.strtDt, new { @class = "lbl-width" })
                    @Html.TextBoxFor(m => m.strtDt, new { @class = "form-control input-sm", @Value = "" })
                </span>
            </div>
            <div class="row form-row">
                <span class="form-item ">
                    @Html.LabelFor(m => m.endDt, new { @class = "lbl-width" })
                    @Html.TextBoxFor(m => m.endDt, new { @class = "form-control input-sm", @Value = "" })
                </span>
            </div>
            <div class="row form-row maintenance-btn">
                <div class="btn-group">
                    <input type="submit" id="btnSavePrice" value="Save" class="btn btn-theme btn-sm" formmethod="post" />
                    <input type="submit" id="btnUpdatePrice" value="Update" class="btn btn-theme btn-sm" formmethod="post" style="display:none" />
                    @*<input type="submit" id="btnCancelPrice" value="Cancel" class="btn btn-theme btn-sm" />*@
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button id="closeModal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</div>

最佳答案

if/else块中的代码无法工作,因为它尝试对.find()和DOM中的元素进行尝试,而DOM甚至还不存在(您尚未添加)。即使在每次迭代中都确实将<tr>添加到DOM中,也会导致性能下降(在每次迭代中搜索整个表)。

解决此问题的一种简单方法(并且更容易调试生成的html)是创建一个隐藏的模板,该模板在每次迭代中都会被克隆和添加。我还假设您想将itemprice的值添加为单选按钮的value属性,以便可以使用var price = $('input[name="rbDefaultPrice"]').val();获得所选单选按钮的值。

<table id="template" style="display:none;">
    <tr>
        <td>
            <label>
                <input type="radio" name="rbDefaultPrice" class="radio" />
                <span class="price"></span>
            </label>
        </td>
        <td class="startdate"></td>
        <td class="enddate"></td>
    </tr>
</table>


然后在.each()循环中,克隆模板,更新其值并将其附加到DOM

var tbody = $('#tblItemPrice tbody');
....
success: function (data) {
    tbody.empty() // remove existing rows
    $.each(data, function (i, item) {
        // clone the template row
        var row = $('#template').clone().find('tr');
        // update properties
        var radio = row.find('.radio');
        radio.val(item.itemprice);
        if (item.defaultflag == 'Y') {
            radio.prop('checked', true);
        }
        row.find('.price').text(item.itemprice);
        row.find('.startdate').text(....
        // add the row to the DOM
        tbody.append(row);
    });
}


旁注:尚不清楚您的ToJavaScriptDate()函数在做什么,但我建议您只是将正确格式的值传递给客户端,以便可以使用row.find('.startdate').text(item.startdate);

10-05 20:42
查看更多