title: Using ajax to check radiobutton by Id in ASP.Net MVC
body: <p>I saw a code that checks the radio button by value, but how do I do this by id? My current scenario is that I'm populating a table by appending html codes using ajax. I'm looping the prices of a certain item while building the html table. After that, I need to check the radio button of a price where default flag is equal to 'Y'.</p>
  
  <p>Here's my if statement that checks the radiobutton by value only, this is not working yet as my radiobutton values are null, only the id and name has value:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>Complete code:</p>
  
  <pre><code>$.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 = '&lt;tbody id="dbBody2"&gt;';
          $.each(data, function (i, item) {
              trHTML += '&lt;tr&gt;&lt;td class="hidden"&gt;' + item.itemid + '&lt;/td&gt;' +
                        '&lt;td style="width:20px"&gt;&lt;label&gt;&lt;input type="radio" name="rbDefaultPrice" id = "iPrice_' + item.itemid + '" /&gt;&lt;/label&gt;&lt;/td&gt;' +
                        '&lt;td&gt;' + item.itemprice + '&lt;/td&gt;' +
                        '&lt;td&gt;' + ToJavaScriptDate(item.startdate) + '&lt;/td&gt;' +
                        '&lt;td&gt;' + ToJavaScriptDate(item.enddate) + '&lt;/td&gt;' +
                        '&lt;/tr&gt;';
  
              //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 += '&lt;/tbody&gt;';
          $("#tblItemPrice tbody").remove();
          $('#tblItemPrice').append(trHTML);
      },
      error: function (xhr, ajaxOptions, thrownError) {
          alert("Error! " + xhr.status);
      }
  });
  </code></pre>
  
  <p>View (modal part)</p>
  
  <pre><code>&lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;div id="divItemPrice" class="" style="border: 0px solid green; "&gt;
              &lt;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;"&gt;
                  &lt;thead&gt;
                      &lt;tr class="inner-table-head"&gt;
                          &lt;th class="hidden"&gt;
                              @Html.DisplayNameFor(model =&gt; model.itemPriceId)
                          &lt;/th&gt;
                          &lt;th&gt;
                              Price
                          &lt;/th&gt;
                          &lt;th&gt;
                              Start Date
                          &lt;/th&gt;
                          &lt;th&gt;
                              End Date
                          &lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody id="bodyToAppend"&gt;
  
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="row form-row"&gt;
                  &lt;span class="form-item"&gt;
                      @Html.HiddenFor(m =&gt; m.itemPriceId)
                      @Html.LabelFor(m =&gt; m.itemPrice, new { @class = "lbl-width" })
                      @Html.TextBoxFor(m =&gt; m.itemPrice, new { @class = "form-control input-sm" })
                  &lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="row form-row"&gt;
                  &lt;span class="form-item "&gt;
                      @Html.LabelFor(m =&gt; m.strtDt, new { @class = "lbl-width" })
                      @Html.TextBoxFor(m =&gt; m.strtDt, new { @class = "form-control input-sm", @Value = "" })
                  &lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="row form-row"&gt;
                  &lt;span class="form-item "&gt;
                      @Html.LabelFor(m =&gt; m.endDt, new { @class = "lbl-width" })
                      @Html.TextBoxFor(m =&gt; m.endDt, new { @class = "form-control input-sm", @Value = "" })
                  &lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="row form-row maintenance-btn"&gt;
                  &lt;div class="btn-group"&gt;
                      &lt;input type="submit" id="btnSavePrice" value="Save" class="btn btn-theme btn-sm" formmethod="post" /&gt;
                      &lt;input type="submit" id="btnUpdatePrice" value="Update" class="btn btn-theme btn-sm" formmethod="post" style="display:none" /&gt;
                      @*&lt;input type="submit" id="btnCancelPrice" value="Cancel" class="btn btn-theme btn-sm" /&gt;*@
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button id="closeModal" type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>