checkbox not send correct value true or false when click approve button it only working for first time?

[ahmebarbary]

I work on asp.net MVC application I face issue check box yes or no send false value yes or no when click approve button

I have two check box one represent true and second false as user requested and i don't it to be radio button because bossiness user request it . Yes represent true No represent false

I Face Issue when select Yes or no for first time it send value correctly if Yes then true or No then false but when i select Yes or No for second time it not working correctly and send only false to approve button what i try 1 - user UI for Yes or No

<td style="width: 50%; font-weight: bold; padding-top: 10px;">

      @Html.Label("Did you try to retain the staff?", htmlAttributes: new { @class = "control-label col-md-5" })
<div class="col-md-7">
<input type="checkbox" id="RetainStuff" name="RetainStuff" value="true" class="retaindtuff-checkbox" @(Model.RetainStuff == true ? "checked" : "") />
          Yes
          &nbsp;&nbsp;
<input type="checkbox" id="RetainStuff" name="RetainStuff" value="false" class="retaindtuff-checkbox" @(Model.RetainStuff == false ? "checked" : "") />
          No
</div>
</td>
<a id="approveControlsId" onclick="submit();" class="btn btn-primary" style="min-width: 100px;margin-top:5px;"><i class="glyphicon glyphicon-ok"></i> Approve </a>

2 - when change yes or no check box to get false of retain stuff i use jQuery as below

 $('.retaindtuff-checkbox').on('change', function () {

     $('.retaindtuff-checkbox').not(this).prop('checked', false);
var selectedValue = $(this).val();
$('#RetainStuff').val(selectedValue);

});

3 - when click button approve it call submit function as below

function submit() {

        console.log("check submit");
var ResignationRequester = new Object();
ResignationRequester.RequestNo = document.getElementById("RequestNo").innerHTML.trim();
  
 

var RetainStuffElement = document.getElementById("RetainStuff");

 if (RetainStuffElement) {
          
var RetainStuffElementExist = document.querySelector('input[name="RetainStuff"]:checked');
          
if (RetainStuffElementExist && RetainStuffElementExist.value === "false") {
                ResignationRequester.RetainStuff = RetainStuffElementExist.value;
              
ResignationRequester.RetainStuff = null;
return false;
            }
else if (RetainStuffElementExist) {
                ResignationRequester.RetainStuff = RetainStuffElementExist.value;
              
            }
 else {
ResignationRequester.RetainStuff = null;

return false;
            }
        }
 else {
ResignationRequester.RetainStuff = "";

        }
 
if (ResignationRequester != null) {
                $.ajax({
type: "POST",
url: '@Url.Action("ApprovalIndex", "Resignation")',
data: JSON.stringify(ResignationRequester),
contentType: "application/json; charset=utf-8",
/*dataType: "json",*/
datatype: "html",
success: function (response) {

                    }

                });
            }
}

4 - action result calling ApprovalIndex on resignation controller

[HttpPost] public async Task<ActionResult> ApprovalIndex(ResignationRequester REQ)

 {

//update approve status

}

so why checkbox yes or no working on first time only Image for page i work on it

 

[Skydiver]

Why do you have to different check boxes with the same id and name?

Anyway, this looks to be a JavaScript/HTML issue, not a C# issue.