Changing the checked attribute of a table data of input type radio-CodePudding

My html file has a table with table data of input type radio. Based on the users selection the defauted checked radio should. I have tried to change the value from a javascript file but still the default radio is still checked. The html file has the following code.

 <tr>
          <td width="1%"><input type="radio" name="cell-recon-search-for-match-mode" checked="true" bind="radioSimilar" id="$cell-recon-search-match-similar" /></td>
          <td><label for="$cell-recon-search-match-similar" bind="or_views_matchOther"></label></td>
        </tr>
        <tr>
          <td width="1%"><input type="radio" name="cell-recon-search-for-match-mode" bind="radioOne" id="$cell-recon-search-match-one" /></td>
          <td><label for="$cell-recon-search-match-one" bind="or_views_matchThis"></label></td>
        </tr>

From the javascript file am trying to update checked radio using the below code.

var frame = $(DOM.loadHTML("core", "scripts/views/data-table/cell-recon-search-for-match.html"));
  var elmts = DOM.bind(frame);

(function(){
//$("#cell-recon-search-match-similar").prop("checked", false);....1
elmts.radioSimilar[0].setAttribute(checked, "false");....2
});

DialogSystem.showDialog(frame);

Both methods 1 and 2 do not achieve the desired outcome. The default radio is still checked. What is it that I could be doing wrong.

Below is the complete html file

<div  style="width: 450px;">
  <div >
    <div  bind="dialogHeader"></div>
    <div  bind="dialogBody">
      <div ><table>
        <tr>
          <td colspan="2"><span bind="or_views_searchFor"></span> "<span bind="cellTextSpan"></span>"</td>
          <td><input bind="input" /></td>
        </tr>
        <tr>
          <td width="1%"><input type="radio" name="cell-recon-search-for-match-mode" checked="true" bind="radioSimilar" id="$cell-recon-search-match-similar" /></td>
          <td><label for="$cell-recon-search-match-similar" bind="or_views_matchOther"></label></td>
        </tr>
        <tr>
          <td width="1%"><input type="radio" name="cell-recon-search-for-match-mode" bind="radioOne" id="$cell-recon-search-match-one" /></td>
          <td><label for="$cell-recon-search-match-one" bind="or_views_matchThis"></label></td>
        </tr>
      </table></div>
    </div>
    <div  bind="dialogFooter">
      <button  bind="okButton"></button>
      <button  bind="newButton"></button>
      <button  bind="clearButton"></button>
      <button  bind="cancelButton"></button>
    </div>
  </div>
</div>

CodePudding user response：

I am not clear that what actually you want to do. but it seems like you want to remove the default checked radio button.

One thing I have noted is that you are using the '$' sign in id and for, even with that you are using jquery also, which has a specific meaning of the '$' sign. So please note that also.

Now if you want to remove the checked radio button then simply see the below line.

$( document ).ready(function() {
// removed $ from the id 
$('#cell-recon-search-match-similar').attr('checked', false);
 });

Before this note that I have removed '$' from the id. because I don't see this as a good way to define id.

CodePudding user response：

Instead of setting the checked attribute of the element to false, try the checked property on the element object. Like you did in .....1. NB: A wrong id was provided. i.e this cell-recon-search-match-similar instead of $cell-recon-search-match-similar Example

(function(){
   $("#$cell-recon-search-match-similar").prop("checked", false);
});

DialogSystem.showDialog(frame);