Develop Reference

Find the closest radio button which is not disabled and checked it

I have code as:
let aid = 1;
if($("#ar_"+aid+" .radio input:checked").is(':disabled')){
$("#ar_"+aid).closest('.radio input').is(':enabled').attr("checked",true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="background:#c3c3c3" id="t_1">
<tbody>
<tr class="amenities-row" id="ar_1">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_1" value="1" disabled>
<label for="am_1">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_1" type="checkbox" value="1" checked>
<label for="checkbox_am_1">
</label>
</div>
</td>
<td>
Amenity 1
</td>
</tr>
<tr class="amenities-row" id="ar_2">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_2" value="1" disabled>
<label for="am_2">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_2" type="checkbox" value="1" checked>
<label for="checkbox_am_2">
</label>
</div>
</td>
<td>
Amenity 2
</td>
</tr>
<tr class="amenities-row" id="ar_3">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_3" value="1">
<label for="am_3">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_3" type="checkbox" value="1" checked>
<label for="checkbox_am_3">
</label>
</div>
</td>
<td>
Amenity 3
</td>
</tr>
<tr class="amenities-row" id="ar_4">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_4" value="1" disabled>
<label for="am_4">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_4" type="checkbox" value="1" checked>
<label for="checkbox_am_4">
</label>
</div>
</td>
<td>
Amenity 4
</td>
</tr>
</tbody>
</table>
<table id="t_2">
<tbody>
<tr class="amenities-row" id="ar_5">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_5" value="1">
<label for="am_5">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_5" type="checkbox" value="1" checked>
<label for="checkbox_am_5">
</label>
</div>
</td>
<td>
Amenity 5
</td>
</tr>
<tr class="amenities-row" id="ar_6">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_6" value="1">
<label for="am_6">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_6" type="checkbox" value="1" checked>
<label for="checkbox_am_6">
</label>
</div>
</td>
<td>
Amenity 6
</td>
</tr>
<tr class="amenities-row" id="ar_7">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_7" value="1" disabled>
<label for="am_7">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_7" type="checkbox" value="1" checked>
<label for="checkbox_am_7">
</label>
</div>
</td>
<td>
Amenity 7
</td>
</tr>
<tr class="amenities-row" id="ar_8">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_8" value="1" disabled>
<label for="am_8">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_8" type="checkbox" value="1" checked>
<label for="checkbox_am_8">
</label>
</div>
</td>
<td>
Amenity 8
</td>
</tr>
</tbody>
</table>
<table id="t_3" style="background:lime">
<tbody>
<tr class="amenities-row" id="ar_9">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_9" value="1" disabled>
<label for="am_9">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_9" type="checkbox" value="1" checked>
<label for="checkbox_am_9">
</label>
</div>
</td>
<td>
Amenity 9
</td>
</tr>
<tr class="amenities-row" id="ar_10">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_10" value="1" disabled>
<label for="am_10">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_10" type="checkbox" value="1" checked>
<label for="checkbox_am_10">
</label>
</div>
</td>
<td>
Amenity 10
</td>
</tr>
<tr class="amenities-row" id="ar_11">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_11" value="1" disabled>
<label for="am_11">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_11" type="checkbox" value="1" checked>
<label for="checkbox_am_11">
</label>
</div>
</td>
<td>
Amenity 11
</td>
</tr>
<tr class="amenities-row" id="ar_12">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_12" value="1" disabled>
<label for="am_12">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_12" type="checkbox" value="1" checked>
<label for="checkbox_am_12">
</label>
</div>
</td>
<td>
Amenity 12
</td>
</tr>
</tbody>
</table>
Here, I have lists of radio buttons. So, at first I will have a id, in this case I have considered that id as 1. Now, I want to do the following things:
check if the radio button with id ar_+aid is disabled (already done)
if it is disabled find the next radio button which is not disabled (i.e, radio button with the same name) of this case the third (ar_3) should be is the closest one, however, it shouldn't go to another radio group.
if every radio button is disabled just console the message, that all are disabled. (i.e if I pass id 11, this should throw an error as all 12,9 and 10 are disabled)
How could I achieve it? Let me know if you need anything more.

You can use name attribute of radio buttton to find the input which is not disabled using $("input[name=" + name + "]:not(:disabled):first") which will checked if the radio with name is not disable and get the :first input while searching then you can use .prop('checked', true) to add checked attribute to that radio button.
Demo Code :
let aid = 1;
//get name of radio
var name = $("#ar_" + aid + " .radio input").attr("name");
//check if disable
if ($("#ar_" + aid + " .radio input").is(':disabled')) {
var count = 0;
//get the rado button whch is not disable
$("input[name=" + name + "]:not(:disabled):first").each(function() {
$(this).prop('checked', true) //prop true
count++;
})
if (count == 0) {
console.log("All disable....")
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="background:#c3c3c3" id="t_1">
<tbody>
<tr class="amenities-row" id="ar_1">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_1" value="1" disabled>
<label for="am_1">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_1" type="checkbox" value="1" checked>
<label for="checkbox_am_1">
</label>
</div>
</td>
<td>
Amenity 1
</td>
</tr>
<tr class="amenities-row" id="ar_2">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_2" value="1" disabled>
<label for="am_2">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_2" type="checkbox" value="1" checked>
<label for="checkbox_am_2">
</label>
</div>
</td>
<td>
Amenity 2
</td>
</tr>
<tr class="amenities-row" id="ar_3">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_3" value="1">
<label for="am_3">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_3" type="checkbox" value="1" checked>
<label for="checkbox_am_3">
</label>
</div>
</td>
<td>
Amenity 3
</td>
</tr>
<tr class="amenities-row" id="ar_4">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_4" value="1" disabled>
<label for="am_4">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_4" type="checkbox" value="1" checked>
<label for="checkbox_am_4">
</label>
</div>
</td>
<td>
Amenity 4
</td>
</tr>
</tbody>
</table>
<table id="t_2">
<tbody>
<tr class="amenities-row" id="ar_5">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_5" value="1">
<label for="am_5">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_5" type="checkbox" value="1" checked>
<label for="checkbox_am_5">
</label>
</div>
</td>
<td>
Amenity 5
</td>
</tr>
<tr class="amenities-row" id="ar_6">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_6" value="1">
<label for="am_6">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_6" type="checkbox" value="1" checked>
<label for="checkbox_am_6">
</label>
</div>
</td>
<td>
Amenity 6
</td>
</tr>
<tr class="amenities-row" id="ar_7">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_7" value="1" disabled>
<label for="am_7">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_7" type="checkbox" value="1" checked>
<label for="checkbox_am_7">
</label>
</div>
</td>
<td>
Amenity 7
</td>
</tr>
<tr class="amenities-row" id="ar_8">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_8" value="1" disabled>
<label for="am_8">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_8" type="checkbox" value="1" checked>
<label for="checkbox_am_8">
</label>
</div>
</td>
<td>
Amenity 8
</td>
</tr>
</tbody>
</table>
<table id="t_3" style="background:lime">
<tbody>
<tr class="amenities-row" id="ar_9">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_9" value="1" disabled>
<label for="am_9">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_9" type="checkbox" value="1" checked>
<label for="checkbox_am_9">
</label>
</div>
</td>
<td>
Amenity 9
</td>
</tr>
<tr class="amenities-row" id="ar_10">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_10" value="1" disabled>
<label for="am_10">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_10" type="checkbox" value="1" checked>
<label for="checkbox_am_10">
</label>
</div>
</td>
<td>
Amenity 10
</td>
</tr>
<tr class="amenities-row" id="ar_11">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_11" value="1" disabled>
<label for="am_11">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_11" type="checkbox" value="1" checked>
<label for="checkbox_am_11">
</label>
</div>
</td>
<td>
Amenity 11
</td>
</tr>
<tr class="amenities-row" id="ar_12">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_12" value="1" disabled>
<label for="am_12">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_12" type="checkbox" value="1" checked>
<label for="checkbox_am_12">
</label>
</div>
</td>
<td>
Amenity 12
</td>
</tr>
</tbody>
</table>

Avoid Reloading of page after save process in MVC

I am Using MVC,Bootstrap in my project .I have Submit button to save data .my design consist of bootstrap nav tabs.
Now my problem is when I save data then I want to change my tab.
My flow is as below
I enter data in first tab then click submit button.
2.Ajax call saves data.after ajax call I wrote tab change tag $('.nav-tabs a[href="#Dependent"]').tab('show'); It changes tab successfully.
3.But after completion debugger again controller is executed and ActionResult index gets executed which then returns index view and then page is reloaded. and my tab is again changed to default first tab
So my problem is how to how to keep changed tab after saving and page reload after save state.
below is my index.chtml only tabs
My Information #*data-toggle="tab"*#
Dependent Information
Finalize
<div class="tab-content well">
<div class="tab-pane active " id="info">
<form data-toggle="validate" role="form" id="defaultForm" method="post">
<table class="table">
<tbody>
<tr>
<td class="auto-style4"></td>
<td style="text-align: center" class="auto-style3"></td>
<td class="auto-style6"> </td>
<td class="auto-style7"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td class="text-center">
<label for="FirstName"> First Name</label>
</td>
<td class="text-center">
<label for="MiddleName">Middle Name</label>
</td>
<td class="text-center">
<label for="LastName">Last Name</label>
</td>
<td></td>
<td> </td>
</tr>
<tr>
<td class="text-center">
<label for="Name">Name</label>
</td>
<td>
<input type="text" class="form-control" id="FirstName" placeholder="FirstName" required="required" />
</td>
<td>
<input type="text" class="form-control" id="MiddleName" placeholder="MiddleName" />
</td>
<td>
<input type="text" class="form-control" id="LastName" placeholder="LastName" required="required" />
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="text-center">
<label for="DOB">Date Of Birth</label>
</td>
<td>
<input type="text" class="form-control" id="DOB" placeholder="MM/DD/YY" required="required" />
</td>
<td>
<label for="Age">Age</label> <input type="text" class="form-control" id="MyAge" placeholder="Age" disabled="disabled" />
</td>
</tr>
<tr>
<td class="text-center">
<label for="Department">Department</label>
</td>
<td>
<div class="dropdown">
<select id="ddDept" class="btn dropdown-toggle"><option></option></select>
</div>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
<tr>
<td class="text-center">
<label for="DOJ">Date Of Joining</label>
</td>
<td>
<input type="text" class="form-control" id="DOJ" placeholder="MM/DD/YY" required="required" />
</td>
</tr>
<tr>
<td class="text-center">
<label for="GrossSalary">Gross Salary</label>
</td>
<td>
<input type="text" class="form-control" id="GrossSalary" placeholder="GrossSalary" required="required" />
</td>
</tr>
<tr>
<td class="text-center">
<label for="Tax">Tax</label>
</td>
<td>
<div class="dropdown">
<select id="ddTax" class="btn dropdown-toggle" onchange="calculateNetsal()"><option></option></select>
</div>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
<tr>
<td class="text-center">
<label for="NetSalary">Net Salary</label>
</td>
<td>
<input type="text" class="form-control" id="NetSalary" placeholder="NetSalary" disabled="disabled" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<button type="submit" class="btn btn-sm btn-primary" value="Create" id="btnAdd" onclick="TabChange(); ">Save and Next</button>
<button type="submit" class="btn btn-sm btn-primary" id="btnClear" onclick="clear();" >Clear</button>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</form>
</div>
#*DEPENDENT*#
<div class="tab-pane " id="Dependent">
<form id="Dependent" method="post" action="">
<table class="table">
<tbody>
<tr>
<td class="auto-style4"> </td>
<td style="text-align: center" class="auto-style3"></td>
<td class="auto-style6"> </td>
<td class="auto-style7"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td class="text-center">
<label for="Name">Name</label>
</td>
<td class="text-center">
<label for="SDOB">Date Of Birth</label>
</td>
<td class="text-center">
<label for="Age">Age</label>
</td>
<td></td>
<td> </td>
</tr>
<tr>
<td class="text-center">
<label for="Spouse">Spouse</label>
</td>
<td>
<input type="text" class="form-control" id="Name" placeholder="Name" />
</td>
<td>
#* <input id="sdob" type="text" />*#
<input type="text" class="form-control" id="S1DOB" placeholder="MM/DD/YY" />
</td>
<td>
<input type="text" class="form-control" id="SAge" placeholder="Age" disabled="disabled" />
</td>
</tr>
<tr>
<td></td>
<td class="text-center">
<label for="CName">Name</label>
</td>
<td class="text-center">
<label for="CDOB">Date Of Birth</label>
</td>
<td class="text-center">
<label for="Age">Age</label>
</td>
<td>
<label for="Relation">Relation</label>
</td>
</tr>
<tr>
<td class="text-center">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="Chck1">Child 1</label>
<input type="checkbox" class="custom-control-input" id="Chck1" value="1" onchange="validationCheck(Chck1); enableTextBox();" onclick=" PopulateDropDownList()" unchecked>
</div>
</td>
<td>
<input type="text" class="form-control" id="CName" placeholder="Name" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C1DOB" placeholder="MM/DD/YY" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C1Age" placeholder="Age" disabled="disabled" />
</td>
<td>
<select id="ddlRelation" class="btn dropdown-toggle" disabled><option></option></select>
</td>
</tr>
<tr>
<td class="text-center">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="Chck2">Child 2</label>
<input type="checkbox" class="custom-control-input" id="Chck2" onchange="validationCheck(Chck2); enableTextBox();" value="2" onclick=" PopulateDropDownList2()" unchecked>
</div>
</td>
<td>
<input type="text" class="form-control" id="C2Name" placeholder="Name" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C2DOB" placeholder="MM/DD/YY" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C2Age" placeholder="Age" disabled="disabled" />
</td>
<td>
<select id="ddlRelation2" class="btn dropdown-toggle" disabled><option></option></select>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
<tr>
<td class="text-center">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="Chck3">Child 3</label>
<input type="checkbox" class="custom-control-input" id="Chck3" onchange="validationCheck(Chck3); enableTextBox();" value="3" onclick=" PopulateDropDownList3()" unchecked>
</div>
</td>
<td>
<input type="text" class="form-control" id="C3Name" placeholder="Name" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C3DOB" placeholder="MM/DD/YY" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C3Age" placeholder="Age" disabled="disabled" />
</td>
<td>
<select id="ddlRelation3" class="btn dropdown-toggle" disabled><option></option></select>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
<tr>
<td class="text-center">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="Chck4">Child 4</label>
<input type="checkbox" class="custom-control-input" id="Chck4" onchange="validationCheck(Chck4); enableTextBox();" value="4" onclick=" PopulateDropDownList4()" unchecked>
</div>
</td>
<td>
<input type="text" class="form-control" id="C4Name" placeholder="Name" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C4DOB" placeholder="MM/DD/YY" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C4Age" placeholder="Age" disabled="disabled" />
</td>
<td>
<select id="ddlRelation4" class="btn dropdown-toggle" disabled><option></option></select>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
#* PARENT*#
<tr>
<td></td>
<td class="text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkFather" value="Father" OnChange="validationCheck1(chkFather); enableTextBox();" unchecked>
<label class="custom-control-label" for="chkFather">Father</label>
</div>
</td>
<td class="text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkMother" value="Mother" OnChange="validationCheck1(chkMother); enableTextBox();" unchecked>
<label class="custom-control-label" for="chkMother">Mother</label>
</div>
</td>
<td class="text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkfatherinlaw" value="FatherInLaw" OnChange="validationCheck1(chkfatherinlaw); enableTextBox();" unchecked>
<label class="custom-control-label" for="chkfatherinlaw">Father In Law</label>
</div>
</td>
<td class="text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkmotherInLaw" value="MotherInLaw" OnChange="validationCheck1(chkmotherInLaw); enableTextBox();" unchecked>
<label class="custom-control-label" for="chkmotherInLaw">Mother In Law</label>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<label for="Name">Name</label>
</td>
<td>
<input type="text" class="form-control" id="FName" placeholder="Name" />
</td>
<td>
<input type="text" class="form-control" id="MName" placeholder="Name" />
</td>
<td>
<input type="text" class="form-control" id="FInLName" placeholder="Name" />
</td>
<td>
<input type="text" class="form-control" id="MInLName" placeholder="Name" />
</td>
</tr>
<tr>
<td class="text-center">
<label for="DOB">Date Of Birth</label>
</td>
<td>
<input type="text" class="form-control" id="FDOB" placeholder="MM/DD/YY" />
</td>
<td>
<input type="text" class="form-control" id="MDOB" placeholder="MM/DD/YY" />
</td>
<td>
<input type="text" class="form-control" id="FInLDOB" placeholder="MM/DD/YY" />
</td>
<td>
<input type="text" class="form-control" id="MInLDOB" placeholder="MM/DD/YY" />
</td>
</tr>
<tr>
<td class="text-center"></td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="FDCh" onchange="loaddropdown(); enableTextBox();" unchecked>
<label class="custom-control-label" for="FDCh">I Dont Know DOB</label>
</div>
</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="MDCh" onchange="loaddropdown2();enableTextBox();" unchecked>
<label class="custom-control-label" for="MDCh">I Dont Know DOB</label>
</div>
</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="FInLDCh" onchange="loaddropdown3(); enableTextBox();" unchecked>
<label class="custom-control-label" for="FInLDCh">I Dont Know DOB</label>
</div>
</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="MInLDCh" onchange="loaddropdown4(); enableTextBox();" unchecked>
<label class="custom-control-label" for="MInLDCh">I Dont Know DOB</label>
</div>
</td>
</tr>
<tr>
<td class="text-center"></td>
<td align="center">
<div class="dropdown">
<select id="ddFAge" class="btn dropdown-toggle"><option></option></select>
</div>
<label for="Age">Age</label>
<input type="text" class="form-control" id="FAge" placeholder="Age" disabled="disabled" />
</td>
<td align="center">
<div class="dropdown">
<select id="ddMAge" class="btn dropdown-toggle"><option></option></select>
</div>
<label for="Age">Age</label>
<input type="text" class="form-control" id="MAge" placeholder="Age" disabled="disabled" />
</td>
<td align="center">
<div class="dropdown">
<select id="ddFInLAge" class="btn dropdown-toggle"><option></option></select>
</div>
<label for="Age">Age</label>
<input type="text" class="form-control" id="FInLAge" placeholder="Age" disabled="disabled" />
</td>
<td align="center">
<div class="dropdown">
<select id="ddMInLAge" class="btn dropdown-toggle"><option></option></select>
</div>
<label for="Age">Age</label>
<input type="text" class="form-control" id="MInLAge" placeholder="Age" disabled="disabled" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<button type="submit" class="btn btn-sm btn-primary" id="btnAdd1" onclick="TabChange();">Save and Next</button>
</td>
<td>
<button type="submit" class="btn btn-primary" id="btnClear" onclick="clear1();">Clear</button>
</td>
<td></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#btnAdd").click(function () {
debugger;
$.ajax(
{
type: "POST",
url: "/Home/Create11",
data: {FirstName:$("#FirstName").val(), MiddleName:$("#MiddleName").val(),
LastName: $("#LastName").val(),
DOB: $("#DOB").val(),
Age: $("#MyAge").val(),
Department: $("#ddDept").val(),
DOJ: $("#DOJ").val(),
GrossSal:$("#GrossSalary").val(),
Tax: $("#ddTax option:selected").text(),
NetSal: $("#NetSalary").val()
},
async:true,
success: function (data) {
}
});
$('.nav-tabs a[href="#Dependent"]').tab('show');
});
});
</script>

Handle the onsubmit event into the form tag and prevent that:
<form data-toggle="validate" role="form" id="defaultForm" method="post" onsubmit="event.preventDefault();">

In the controller Index method create a optional parameter for the selected tab. Default to tab 0 but when you call from the javascript code set the tab to the one you want.

Check or uncheck checkboxes on the basis of radio buttons checked result

On the front view, I have:
<div class="single-category-container">
<table>
<thead>
<tr>
<th scope="col">Base</th>
<th scope="col">Select</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
#foreach($data as $cvk => $cvv)
<tr class="am-row">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_{{$ck}}" id="am_{{ $cvv['amenity_id'] }}" value="{{ $cvv['amenity_id'] }}">
<label for="am_{{ $cvv['amenity_id'] }}">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_{{ $cvv['amenity_id'] }}" type="checkbox" checked="checked">
<label for="checkbox_am_{{ $cvv['amenity_id'] }}">
</label>
</div>
</td>
<td>{{ $cvv['amenity_name'] }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
Here, you can see on the first column that there is radio and on second column there is checkbox. So, my requirements is whenever a radio button is checked, I want all the checkbox to be checked of that single-category-container except the checkbox of the same row where the radio button is checked.
I have tried the following code but with no success:
$('.single-category-container input[type=radio]').change(function() {
$(this).parents('.single-category-container input[type=checkbox]').attr('checked',true);
$(this).parents('tr input[type=checkbox]').attr('checked',false);
});
Note: there are multiple `.single-category-container` that is even this container is in a loop, here I am representing just a element from the loop because it should give the idea.

Try as follows. You need to add find for this.
$('.aprFilterCol input[type=radio]').change(function() {
$(this).parents('.single-category-container').find('input[type="checkbox"]').prop('checked',true);
$(this).parents('tr').find('input[type="checkbox"]').prop('checked',false);
});

The selectors which are used to find the parent are wrong. Instead of trying to find the elements in one go by doing $(this).parents('.single-category-container input[type=checkbox]')', first find the closest parent and then find the matching child elements inside it. Here is the working example
$(document).on('change', '.single-category-container input[type=radio]', function() {
$(this).closest('.single-category-container').find('input[type=checkbox]').prop('checked', true);
$(this).closest('tr').find('input[type=checkbox]').prop('checked', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="single-category-container">
<table>
<thead>
<tr>
<th scope="col">Base</th>
<th scope="col">Select</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr class="am-row">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat" id="radio1" value="">
<label for="radio1">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="check1" type="checkbox">
<label for="check1">
</label>
</div>
</td>
<td>Name</td>
</tr>
<tr class="am-row">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat" id="radio2" value="">
<label for="radio2">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="check2" type="checkbox">
<label for="check2">
</label>
</div>
</td>
<td>Name</td>
</tr>
<tr class="am-row">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat" id="radio3" value="">
<label for="radio3">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="check3" type="checkbox">
<label for="check3">
</label>
</div>
</td>
<td>Name</td>
</tr>
<tr class="am-row">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat" id="radio4" value="">
<label for="radio4">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="check4" type="checkbox">
<label for="check4">
</label>
</div>
</td>
<td>Name</td>
</tr>
</tbody>
</table>
</div>

display duplicate values when checked two binding checkbox

my two synchronized checkbox displayed duplicate values when checked, how to fix it? I just want to show one single value of each checkbox
see the demo
http://jsfiddle.net/HvKmE/1127/
seems need more words to ask a question...
$('[type="checkbox"]').on('change', function() {
var selector = $(this).data('selector');
$('[data-selector="' + selector + '"]').prop("checked", this.checked);
});
$(':checkbox').on('change', function() {
var values = $(':checkbox:checked').map(function() {
return this.value;
}).get().join(',');
$('p').html(values);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="CS-popup" class="popup-windows ">
<input type="checkbox" name="CS" value="GMSC01" data-selector="GMSC01BOX-1">GMSC01
<input type="checkbox" name="CS" value="GMSC02" data-selector="GMSC02BOX-1">GMSC02
<input type="checkbox" name="CS" value="VMSC01" data-selector="VMSC01BOX-1">VMSC01
<br>
<input type="checkbox" name="CS" value="VMSC02" data-selector="VMSC02BOX-1">VMSC02
<input type="checkbox" name="CS" value="GMGW01" data-selector="GMGW01BOX-1">GMGW01
<input type="checkbox" name="CS" value="GMGW02" data-selector="GMGW02BOX-1">GMGW02
<br>
<input type="checkbox" name="CS" value="VMGW01" data-selector="VMGW01BOX-1">VMGW01
<input type="checkbox" name="CS" value="VMGW02" data-selector="VMGW02BOX-1">VMGW02
<input type="checkbox" name="CS" value="SPS01" data-selector="SPS01BOX-1">SPS01
<br>
</div>
<div>
<TD class="col-ne col-CS">
<INPUT name="cf_ne015" type="checkbox" data-selector="GMSC01BOX-1" value="GMSC01">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne016" type="checkbox" data-selector="GMSC02BOX-1" value="GMSC02">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne017" type="checkbox" data-selector="VMSC01BOX-1" value="VMSC01">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne018" type="checkbox" data-selector="VMSC02BOX-1" value="VMSC02">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne019" type="checkbox" data-selector="GMGW01BOX-1" value="GMGW01">
</TD1 <TD class="col-ne col-CS">
<INPUT name="cf_ne020" type="checkbox" data-selector="GMGW02BOX-1" value="GMGW02">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne021" type="checkbox" data-selector="VMGW01BOX-1" value="VMGW01">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne022" type="checkbox" data-selector="VMGW02BOX-1" value="VMGW02">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne023" type="checkbox" data-selector="SPS01BOX-1" value="SPS01">
<p></p>

Firstly note that you don't need to two separate change event handlers. They both point to the same elements, so you can combine them.
Secondly, your HTML is invalid as you cannot have a td element as a child of a div. It need to be contained within a table, tbody, then tr. The p element also needs to be moved outside of that table. You should also wrap the checkboxes and their associated text nodes in label elements to increase their hit area as a courtesy to your users.
To fix the issue of duplicate values appearing, simply make the :checkbox selector more specific; restrict it to the #CS-popup element for example:
var values = $('#CS-popup :checkbox:checked').map(function() ...
Here's a full working example with the JS and HTML corrected:
$(':checkbox').on('change', function() {
var selector = $(this).data('selector');
$('[data-selector="' + selector + '"]').prop("checked", this.checked);
var values = $('#CS-popup :checkbox:checked').map(function() {
return this.value;
}).get().join(',');
$('p').html(values);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="CS-popup" class="popup-windows ">
<label>
<input type="checkbox" name="CS" value="GMSC01" data-selector="GMSC01BOX-1" />
GMSC01
</label>
<label>
<input type="checkbox" name="CS" value="GMSC02" data-selector="GMSC02BOX-1" />
GMSC02
</label>
<label>
<input type="checkbox" name="CS" value="VMSC01" data-selector="VMSC01BOX-1" />
VMSC01
</label><br />
<label>
<input type="checkbox" name="CS" value="VMSC02" data-selector="VMSC02BOX-1">
VMSC02
<label>
<input type="checkbox" name="CS" value="GMGW01" data-selector="GMGW01BOX-1" />
GMGW01
<label>
<input type="checkbox" name="CS" value="GMGW02" data-selector="GMGW02BOX-1" />
GMGW02
</label><br />
<label>
<input type="checkbox" name="CS" value="VMGW01" data-selector="VMGW01BOX-1" />
VMGW01
</label>
<label>
<input type="checkbox" name="CS" value="VMGW02" data-selector="VMGW02BOX-1" />
VMGW02
</label>
<label>
<input type="checkbox" name="CS" value="SPS01" data-selector="SPS01BOX-1" />
SPS01
</label><br />
</div>
<div>
<table>
<tbody>
<tr>
<td class="col-ne col-CS">
<input name="cf_ne015" type="checkbox" data-selector="GMSC01BOX-1" value="GMSC01" />
</td>
<td class="col-ne col-CS">
<input name="cf_ne016" type="checkbox" data-selector="GMSC02BOX-1" value="GMSC02" />
</td>
<td class="col-ne col-CS">
<input name="cf_ne017" type="checkbox" data-selector="VMSC01BOX-1" value="VMSC01" />
</td>
<td class="col-ne col-CS">
<input name="cf_ne018" type="checkbox" data-selector="VMSC02BOX-1" value="VMSC02" />
</td>
<td class="col-ne col-CS">
<input name="cf_ne019" type="checkbox" data-selector="GMGW01BOX-1" value="GMGW01" />
</td>
<td class="col-ne col-CS">
<input name="cf_ne020" type="checkbox" data-selector="GMGW02BOX-1" value="GMGW02" />
</td>
<td class="col-ne col-CS">
<input name="cf_ne021" type="checkbox" data-selector="VMGW01BOX-1" value="VMGW01" />
</td>
<td class="col-ne col-CS">
<input name="cf_ne022" type="checkbox" data-selector="VMGW02BOX-1" value="VMGW02" />
</td>
<td class="col-ne col-CS">
<input name="cf_ne023" type="checkbox" data-selector="SPS01BOX-1" value="SPS01" />
</td>
</tr>
</tbody>
</table>
</div>
<p></p>

Select only one checkbox/radiobutton in the same row and column

I have six columns with six checkboxes (or radio).
My intention is, that only one checkbox can be selected in the same row and the same column.
For example:
When I select the checkbox in column4 and row3', every checkbox in row3 and column4 have to be unselected immediately.
I tried it with radio buttons, but I simply can´t do it, because every single radio always to be in two different groups.
Edit:
My HTML Code:
<div style="position:absolute; left: 20px; top: 20px" class="checkcolumn2" >
<input type="checkbox" ID="column1row1">column1row1<br>
<input type="checkbox" ID="column1row2">column1row2<br>
<input type="checkbox" ID="column1row3">column1row3<br>
<input type="checkbox" ID="column1row4">column1row4<br>
<input type="checkbox" ID="column1row5">column1row5<br>
<input type="checkbox" ID="column1row6">column1row6<br>
</div>
<div style="position:absolute; left: 200px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column2row1">column2row1<br>
<input type="checkbox" ID="column2row2">column2row2<br>
<input type="checkbox" ID="column2row3">column2row3<br>
<input type="checkbox" ID="column2row4">column2row4<br>
<input type="checkbox" ID="column2row5">column2row5<br>
<input type="checkbox" ID="column2row6">column2row6<br>
</div>
<div style="position:absolute; left: 380px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column3row1">column3row1<br>
<input type="checkbox" ID="column3row2">column3row2<br>
<input type="checkbox" ID="column3row3">column3row3<br>
<input type="checkbox" ID="column3row4">column3row4<br>
<input type="checkbox" ID="column3row5">column3row5<br>
<input type="checkbox" ID="column3row6">column3row6<br>
</div>
<div style="position:absolute; left: 560px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column4row1">column4row1<br>
<input type="checkbox" ID="column4row2">column4row2<br>
<input type="checkbox" ID="column4row3">column4row3<br>
<input type="checkbox" ID="column4row4">column4row4<br>
<input type="checkbox" ID="column4row5">column4row5<br>
<input type="checkbox" ID="column4row6">column4row6<br>
</div>
<div style="position:absolute; left: 740px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column5row1">column5row1<br>
<input type="checkbox" ID="column5row2">column5row2<br>
<input type="checkbox" ID="column5row3">column5row3<br>
<input type="checkbox" ID="column5row4">column5row4<br>
<input type="checkbox" ID="column5row5">column5row5<br>
<input type="checkbox" ID="column5row6">column5row6<br>
</div>
<div style="position:absolute; left: 920px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column6row1">column6row1<br>
<input type="checkbox" ID="column6row2">column6row2<br>
<input type="checkbox" ID="column6row3">column6row3<br>
<input type="checkbox" ID="column6row4">column6row4<br>
<input type="checkbox" ID="column6row5">column6row5<br>
<input type="checkbox" ID="column6row6">column6row6<br>
</div>

It depends on the markup. Here's a simple example:
html
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
jquery
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);
// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);
});
Here's a fiddle
Here's another example using classes

I'm not sure if this is the best possible solution, but I think it does what you want.
$(":radio").change(function() {
// find column
var tdColumn = $(this).closest("td");
// find row
var trRow = tdColumn.closest("tr");
// uncheck all radios in current row, except the selected radio
trRow.find(":radio").not($(this)).prop("checked",false);
// index of current column
var i = tdColumn.index();
// uncheck all radios in current column, except the selected radio
trRow.siblings("tr").each(function(key, value) { $(value).find(":radio")[i].checked = false; } );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<table>

I created it by 3 columns and 5 rows BUT it works for N cols and M rows... just increase td and tr tags...
Try this...
Also you can test it live here ;)
Result
.....................................................................................................................................
jQuery:
$(document).ready(function(){
var $table = $('#MyTable');
var $rowCount = $table.find('tr').length;
var $colCount = $($table.find('tr')[0]).find('td').length;
console.log($rowCount);
console.log($colCount);
$table.find('tr').each(function(i, e){
$tr=$(e);
console.log($tr);
});
});
$(".chBox").click(function() {
console.log('clicked');
$this=$(this);
$row=$this.parent().parent();
$table=$this.closest('table');
$row.find('.chBox').each(function(i, e){
$checkbox=$(e);
$checkbox.prop('checked',false);
console.log($checkbox);
});
$this.prop('checked',true);
var col = $this.parent().parent().children().index($this.parent());
var row = $this.parent().parent().parent().children().index($this.parent().parent());
console.log(col);
console.log(row);
$table.find('tr').each(function(i, e){
$tr=$(e);
$tr.find('.chBox').each(function(k,ex){
$chBox=$(this);
if(k==col && i!=row)
$chBox.prop('checked',false);
});
});
});
HTML:
<table id="MyTable">
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
</table>

Select only one checkbox/radiobutton in the same row and column with Angular 7 and JavaScript
The Idea behind this is that with radio button we have name property which makes single select either by row or column but for both row and column. I placed the row in name and handled column with javascript whenever button will click.
This is HTML CODE
<section class="editor">
<strong>Editor</strong>
<div>
<label>Add option</label>
<button (click)="addOption()">+</button>
<div *ngFor="let option of options;let i = index">
<span>{{option.title +(i+1)}}</span><button (click)="deleteOption(i)"
*ngIf="options.length>2">X</button>
</div>
</div>
</section>
<hr>
<section>
<strong>Builder</strong>
<div class="builder">
<label>Question title goes here</label><br>
<div *ngFor="let option of options;let row_index = index">
<span>{{option.title +(row_index+1)}}</span>
<span *ngFor="let rank of options;let column_index=index">
<input type="radio" name="{{row_index}}" class="{{column_index}}"
(click)="check(column_index,$event)">
</span>
</div>
</div>
</section>
And this is my .ts file code where I Implemented with Javascript
export class AppComponent {
options = [{
title: "option",
rank: 0,
}, {
title: "option",
rank: 0
}]
constructor() {
}
ngOnInit(): void { }
addOption() {
this.options.push({
title: "option",
rank: 0
})
}
deleteOption(i) {
this.options.splice(i, 1);
}
check(column_index, event) {
Array.from(document.getElementsByClassName(column_index)).map(x=>x['checked']=false);
event.target.checked=true;
}
}