Блог

Я видел код, который проверяет переключатель по значению, но как мне сделать это по идентификатору? Мой текущий сценарий заключается в том, что я заполняю таблицу, добавляя html-коды с помощью ajax. Я зацикливаю цены на определенный товар при создании html-таблицы. После этого мне нужно проверить переключатель цены, где флаг по умолчанию равен ‘Y’.

Вот мой оператор if, который проверяет radiobutton только по значению, это пока не работает, поскольку мои значения radiobutton равны нулю, значение имеют только идентификатор и имя:

 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">amp;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() элемент and в 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); etc