Click here to Skip to main content
15,883,458 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
I work on 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" : "") />
          <input type="checkbox" id="RetainStuff" name="RetainStuff" value="false" class="retaindtuff-checkbox" @(Model.RetainStuff == false ? "checked" : "") />
   <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();

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) {
                    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

public async Task<ActionResult> ApprovalIndex(ResignationRequester REQ) 
//update approve status 
Peter_in_2780 22-Jan-24 1:22am    
Two checkboxes with the same id's and names. What on earth do you think is going to happen when you access it? First one? Second one? Both? Neither? Random choice?
ahmed_sa 27-Jan-24 6:20am    
ok thanks

1 solution

If you want to use checkbox instead of radio button. Here can be one solution - Use only one checkbox. If checked, it will mean "Yes", if unchecked, it means No. Dont use 2 checkbox for each yes and no option.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900