Develop Reference

Remove sorting from Datatable in checkboxes

Whenever I click on select-all on top of the table it goes back to the first page. I need to select some rows in the table and export them to a CSV file but when selecting on different pages, when I click on select all it goes back to page 1.
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_<?php echo $valuep['0'] ;?>">
<input id="checkbox_<?php echo $valuep['0'] ;?>" type="checkbox" name="leads_ids" value="<?php echo $valuep['0'] ;?>" class="select_click">
<span></span>
</label>
<input type="hidden" id="enable_all" name="enable_all" value="1">
<input type="hidden" id="lead_contact_id_<?php echo $valuep['0'] ;?>" name="contact_id" value="<?php echo $valuep['0'] ;?>">
</div>
<span id="custom_controls"></span>
</td>
var table = $('#mytable').DataTable({
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
'className': 'checkbox check-success'
}],
'order': [
[1, 'asc']
]
});

I suggest try trigger click all checkbox in the current visible page.
var myTable = $('#mytable').DataTable({
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
}],
'order': [
[1, 'asc']
],
});
$(document).on('click', '#select_all', function() {
$('input.select_click', document).each(function() {
$(this).trigger('click');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
<table class="table table-bordered" id="mytable">
<thead>
<th>Select All</th>
<th>Data</th>
</thead>
<tbody>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_1" type="checkbox" name="leads_ids" value="1" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 1</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
</tbody>
</table>

How to add name attribute if checkbox is checked and if it is unchecked than remove

I added a checkbox inside a for loop, so I want only the checkbox that is checked to have a name attribute.
I tried but when I clicked on the second checkbox, the name of the first attribute is not removed.
Here is my code :
$("input:checkbox").on('click', function() {
var $box = $(this);
if ($box.is(":checked")) {
var group = "input:checkbox[name='" + $box.attr("name") + "']";
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
$('select ,input[type=checkbox] ').on('change', function() {
var selector = $(this).closest("tr")//get closest tr
//get select valus
var id = selector.attr('data-id');
// var package_name = selector.find('.visa_type').val();
var processing_type = selector.find(".processing_type option:selected").text();
// alert(processing_type)
var processing_price = selector.find(".processing_type option:selected").val();
// alert(processing_price)
var add = selector.find(".package_price").text(processing_price)
var total = add.val()
var date = selector.find('.travel_date').val();
if(selector.find('input[type=checkbox]').prop("checked") == true){
//id
selector.find('.id').attr('name','id')
//visa_type
selector.find('.visa_type').attr('name','visa_type');
//processing_type
selector.find(".processing_type").attr('name','processing_type');
//traveldate
selector.find('.travel_date').attr('name','travel_date');
//total
selector.find(".package_price").attr('name','total','value',total)
}else if(selector.find('input[type=checkbox]').prop("checked") == false){
//id
selector.find('.id').attr('name','')
//visa_type
selector.find('.visa_type').attr('name','');
//processing_type
selector.find(".processing_type").attr('name','');
//traveldate
selector.find('.travel_date').attr('name','');
//total
selector.find(".package_price").attr('name','')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive" id="flip-scroll">
<thead>
<tr>
<th scope="col">Visa Option</th>
<th scope="col">Processing Type</th>
<th height="60" scope="col">Travel Date</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr class="valid-container">
<input type="hidden" class="id" value="1">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="90 days single visa">90 days single visa</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="15000" selected="">Normal</option>
<option value="20000">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">15000</output>.00</td>
</tr>
<tr class="valid-container">
<input type="hidden" class="id" value="2">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="30 days">30 days</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="11" selected="">Normal</option>
<option value="22">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">11</output>.00</td>
</tr>
<tr class="valid-container">
<input type="hidden" class="id" value="3">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="90 days">90 days</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="22" selected="">Normal</option>
<option value="33">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">22</output>.00</td>
</tr>
</tbody>
</table>

As you need to select only one checkbox at a time you can remove checked from other checkboxes whenever any checkbox is checked using $('tbody > tr .checkbox').not(this).prop('checked',false); then you just need to loop through your trs to add or remove name attributes.
Demo Code:
$('input[type=checkbox] ').on('change', function() {
$('tbody > tr .checkbox').not(this).prop('checked',false);//remove checked from other checkbox
//loop thrugh trs
$("tbody > tr").each(function() {
//add or remove name attribute
var selector = $(this)
if (selector.find('input[type=checkbox]').prop("checked") == true) {
selector.find('.visa_type').attr('name', 'visa_type');
selector.find(".processing_type").attr('name', 'processing_type');
selector.find('.travel_date').attr('name', 'travel_date');
} else if (selector.find('input[type=checkbox]').prop("checked") == false) {
selector.find('.visa_type').attr('name', '');
selector.find(".processing_type").attr('name', '');
selector.find('.travel_date').attr('name', '');
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive" id="flip-scroll">
<thead>
<tr>
<th scope="col">Visa Option</th>
<th scope="col">Processing Type</th>
<th height="60" scope="col">Travel Date</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr class="valid-container">
<input type="hidden" class="id" value="1">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="90 days single visa">90 days single visa</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="15000" selected="">Normal</option>
<option value="20000">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">15000</output>.00</td>
</tr>
<tr class="valid-container">
<input type="hidden" class="id" value="2">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="30 days">30 days</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="11" selected="">Normal</option>
<option value="22">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">11</output>.00</td>
</tr>
<tr class="valid-container">
<input type="hidden" class="id" value="3">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="90 days">90 days</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="22" selected="">Normal</option>
<option value="33">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">22</output>.00</td>
</tr>
</tbody>
</table>

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>

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>

Show table when radio button is checked

At first, I request you to see these two images.
image 1
image 2
There are more than 20 fields like in 'Image 1'. If select yes then show a table like in 'Image 2'. So I have 20 Yes/No field and 20 different tables.
How can I show the tables if select yes. I have tried some code for a single field. As there are lots of fields I want to know is there any way to make the code minimal and easier. Here is my code that I tried:
CSS:
#show-dc-table {
display: none;
}
Script:
<script>
$(document).ready(function() {
$('.form-check-inline input[type="radio"]').click(function() {
if ($(this).attr('id') == 'allergy-yes') {
$('#show-dc-table').show();
} else {
$('#show-dc-table').hide();
}
});
});
</script>
HTML:
<div class="form-group row">
<label class="col-sm-2 col-form-label">Do you have Allergies </label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergy" value="Yes" id="allergy-yes">
<label class="form-check-label">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergy" value="No">
<label class="form-check-label">No</label>
</div>
</div>
</div>
<table class="table table-striped" id="show-dc-table">
<tr>
<th scope="col">Alergic Reactions to</th>
<th scope="col">Yes</th>
<th scope="col">No</th>
<th scope="col">Notes</th>
</tr>
</table>

To make the same code work for multiple repeated HTML structures group elements by behaviour using the same class on each. Then use DOM traversal to relate the elements to each other when certain events happen.
In your case you would use closest() and next() to find the table related to the changed radio. Also note that you should use the checked property of the radio, along with the change event, to determine the value selected. Try this:
$(document).ready(function() {
$('.form-check-inline input[type="radio"]').on('change', function() {
$(this).closest('.form-group').next('table').toggle(this.checked && this.value === 'Yes');
});
});
.show-dc-table {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Do you have allergies?</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergy" value="Yes">
<label class="form-check-label">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergy" value="No">
<label class="form-check-label">No</label>
</div>
</div>
</div>
<table class="table table-striped show-dc-table">
<thead>
<tr>
<th scope="col">Alergic Reactions to</th>
<th scope="col">Yes</th>
<th scope="col">No</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aspirin, Ibuprofen, Codeine</td>
<td><input type="radio" name="a1" /></td>
<td><input type="radio" name="a2" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Do you have a cough?</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="cough" value="Yes">
<label class="form-check-label">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="cough" value="No">
<label class="form-check-label">No</label>
</div>
</div>
</div>
<table class="table table-striped show-dc-table">
<thead>
<tr>
<th scope="col">Alergic Reactions to</th>
<th scope="col">Yes</th>
<th scope="col">No</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum</td>
<td><input type="radio" name="a1" /></td>
<td><input type="radio" name="a2" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>

To generalize any DOM manipulation script, do not use hardcoded ids. Use methods like closest , find , next , prev. Two methods closest , find are used in this particular example.
$(document).ready(function() {
$('.form-check-inline input[type="radio"]').click(function() {
if ($(this).val() == 'Yes') {
$(this).closest('.form-group').next('table').show();
} else {
$(this).closest('.form-group').next('table').hide();
}
});
});
.table.table-striped {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-group row">
<label class="col-sm-2 col-form-label">Do you have Allergies </label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergy" value="Yes" id="allergy-yes">
<label class="form-check-label">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergy" value="No">
<label class="form-check-label">No</label>
</div>
</div>
</div>
<table class="table table-striped" id="show-dc-table">
<tr>
<th scope="col">Alergic Reactions to</th>
<th scope="col">Yes</th>
<th scope="col">No</th>
<th scope="col">Notes</th>
</tr>
</table>