JSFiddle - React, Tailwind, and code Playground

by Adem GENC

HTML

Analog: <input type="checkbox" name="analog" id="analog">
<select size="1" name="analog_channels" class="form-control" id="analog_channels" style="width: 140px;" disabled="">
<option value="-1">&nbsp;</option>
<option value="8">8 Analog Channels</option>
<option value="16">16 Analog Channels</option>
<option value="24">24 Analog Channels</option>
<option value="32">32 Analog Channels</option>
<option value="40">40 Analog Channels</option>
<option value="48">48 Analog Channels</option>
<option value="56">56 Analog Channels</option>
<option value="64">64 Analog Channels</option>
<option value="72">72 Analog Channels</option>
<option value="80">80 Analog Channels</option>
</select>
<br />
Digital: <input type="checkbox" name="dijital" id="dijital">
<select size="1" name="digital_channels" class="form-control" id="digital_channels" style="width: 140px;" disabled="">
<option value="-1">&nbsp;</option>
<option value="4">4 Digital Channels</option>
<option value="8">8 Digital Channels</option>
<option value="12">12 Digital Channels</option>
<option value="16">16 Digital Channels</option>
<option value="20">20 Digital Channels</option>
<option value="24">24 Digital Channels</option>
<option value="28">28 Digital Channels</option>
<option value="32">32 Digital Channels</option>
<option value="36">36 Digital Channels</option>
<option value="40">40 Digital Channels</option>
<option value="44">44 Digital Channels</option>
<option value="48">48 Digital Channels</option>
<option value="52">52 Digital Channels</option>
<option value="56">56 Digital Channels</option>
<option value="60">60 Digital Channels</option>
<option value="64">64 Digital Channels</option>
<option value="68">68 Digital Channels</option>
<option value="72">72 Digital Channels</option>
</select>

JavaScript

$("#analog").change(function(){
        $("#analog_channels").removeAttr("disabled", $(this).is(':checked'));
        $('#analog_channels').prop('selectedIndex',0);
    });
    $("#dijital").change(function(){
        $("#digital_channels").removeAttr("disabled", $(this).is(':checked'));
        $('#digital_channels').prop('selectedIndex',0);
    });
    
//dropdown listener
    digital_to_analog = [];
  var digital_to_analog = {72:8, 68:8, 64:16, 60:16, 56:24, 52:24, 48:32, 44:32, 40:40, 36:40, 32:48, 28:56, 24:56, 20:64, 16:64, 12:72, 8:72, 4:72};
  
$("#analog_channels").change(function(){
	var selectedFreq = parseInt(this.value);
	var digitalLimit = (72 - selectedFreq);	
  
	console.log("Value Check: " + selectedFreq);
	console.log("Digital Limit: " + digitalLimit);
	
	if(selectedFreq != ''){		
		//reset
		$("#digital_channels option").prop('disabled', false);					
		//set
       analog_to_digital = [];
    var selected = $('#qam_paket_sayisi option:selected').val();
    var analog_to_digital = {80:"-1", 72:"-1", 64:8, 56:16, 48:24, 40:32, 32:40, 24:48, 16:56, 8:64, "-1":72};
		$("#digital_channels option").each(function () {						
			var digitalFreq = this.value;						 
				if (digitalFreq > analog_to_digital[selectedFreq]) {

        if($("#dijital").is(':checked')){
          $('#digital_channels option[value="' + analog_to_digital[selectedFreq] + '"]').prop('selected', 'selected');
        }
        
				this.disabled = true;
			}						
		}); 
	}

});