我看到了一个代码,该代码按值检查单选按钮,但是如何按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">×</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()
循环中,克隆模板,更新其值并将其附加到DOMvar 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);
等