Issue when change checkbox from yes to nor not send correct value true or false ?

See more:

Javascript

jQuery

ASP.NET4

I work on asp.net MVC application I face issue when change check box (Yes to No) OR (No to Yes)

not detect value true or false correctly .

I have two check box

Yes represent true value

No represent false value

I don't need to change checkbox to radio button because this is user requirement as checkbox .

when select Yes or No for first time it send value correctly

but when I select Yes or No for second time it not send value correctly and send only value false to approve button when select Yes or No .

so why checkbox yes or no working on first time only

What I have tried:

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
            
          <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;">class="glyphicon glyphicon-ok"> Approve </a>
2 - when change Yes or No check box to get value true or false of retain stuff checkbox 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 approve button value of check box not send correctly to submit() function

function 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: "html",
                    success: function (response) {
                        
                    }
                    
                });
            }
    }  
4 - action result calling ApprovalIndex on resignation controller

[HttpPost] 
public async Task<ActionResult> ApprovalIndex(ResignationRequester REQ) 
{ 
//update approve status 
}