JSFiddle - React, Tailwind, and code Playground

by Mohd Zaki

HTML

<input type="checkbox" id="ada" name="ada"  /> Kursus Bina Negara<br/>
<select disabled="disabled" name="senaraiKursus" id="senaraiKursus">
    <option value=''>Pilih Kursus</option>
</select>

JavaScript

//sample data
var json = [{"id": "1", "name": "Latihan A"}, {"id": "2", "name": "Latihan B"}, {"id": "3", "name": "Latihan C"}];

    //semak sama ada checkbox memounyai action
    $("#ada").change(function() {
        //Jika checkbox:checked 
        if ($("#ada").prop('checked')) {
            //remove attribute disable dropdown: #senaraiKursus
            $('#senaraiKursus').attr('disabled', false);
            var appenddata;
            appenddata += "<option value=''>Pilih Kursus</option>";
             //guna data JSON 
            $.each(json, function(i, val) {
                appenddata += "<option value ='" + val.id + "'>" + val.name + "</option>";
            });
            //append result JSON ke dalam dropdown #senaraiKursus
            $('#senaraiKursus').html(appenddata);
        } else {
            //Jika checkbox:uncheck
            //set attribute disable dropdown: #senaraiKursus
            $('#senaraiKursus').attr('disabled', true);
            //append blank 'Pilih Kursus'         
            $('#senaraiKursus').html("<option value=''>Pilih Kursus</option>");
        }
    });