JSFiddle - React, Tailwind, and code Playground

HTML

Header:
<br /><input id="check" type="checkbox" name="approve" />
<select id="myddl" name="myddl">
    <option value="1">One</option>
    <option value="2">Twooo</option>
    <option value="3">Three</option>
</select>
<div class="detail">
    <p>Detail</p>
        <br />
    <select id="Select1" name="myddl"  >
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
    <br />
    <select id="Select2" name="myddl"  >
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
    <br />
    <select id="Select3" name="myddl"  >
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
    <br />
    <select id="Select4" name="myddl"  >
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
<br />
    <select id="Select5" name="myddl" >
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>    
</div>

JavaScript

var $ddls = $('select');
var $check = $('#check');
var $ddlHeader = $("#myddl");
var $ddlDetails = $('.detail select');

$ddls.prop("disabled", true); 

$check .click(function() {
    //$ddls.prop("disabled", true);
    $ddlHeader.prop("disabled", $check.checked);
});

$ddlHeader.change(function() {  
    $ddlDetails.removeAttr("disabled"); 
});