JSFiddle - React, Tailwind, and code Playground

by Fantasy Land

HTML

<input type = "checkbox" id="deleteAll" />
<div class="selectDel">
<input type = "checkbox" align="center"  id="chkDelete1"/>
<input type = "checkbox" align="center" disabled="disabled"  id="chkDelete2"/>
<input type = "checkbox" align="center"  id="chkDelete3"/>
<input type = "checkbox" align="center"  id="chkDelete4"/>
</div>

JavaScript

$("#deleteAll").change(function() {
			if($("#deleteAll").is(":checked"))	{		
					$(".selectDel").children("input:checkbox").map(function () {
							$(this).prop('checked', true);
							if($(this).is(':disabled')) {
									$(this).prop('checked', false);
							}
					});
			}else	{
				$(".selectDel").children("input:checkbox").map(function () {
					$(this).prop('checked', false);
				});	
			}
	 });