How to disable form dropdown with jQuery?

Question

I made a dropdown whose contents I retrieve from the database:

image 2

image 1

How can I create conditions when selecting Received that the recipient's name field is enabled and besides the recipient's form is disabled ?

var $inputs = $('#kliks');

$('select').change(function() {
  $inputs.prop('disabled', $(this).val() === 'Received');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-10">
  <label>Ubah status</label>
  <select class="form-control col-lg-10" name="id_status">
    <option value="0">Pilih</option>
    <option value="Foo">Foo</option>
    <option value="Bar">Bar</option>
    <option value="Received">Received</option>
  </select>
</div>
<div class="form-group col-md-10">
  <input type="text" class="form-control kliks" id="kliks" name="" placeholder="nama penerima">
</div>

This did not work.

Answer 1

Disabled dropdown with event

jQuery('select').prop('disabled', true);

Disabled only dropdown

jQuery('select').attr('disabled', true);

I have correct the code and dropdown disabled if we selected 'Received' option

try this

jQuery(document).ready(function(){   

    var $inputs = jQuery('#kliks');

    jQuery('select').change(function() {

        var target = jQuery(this);

        var selected_val = target.find(':selected').val(); 

        if (selected_val === 'Received') { alert(selected_val);

            $inputs.prop('disabled', true);

        }

    });

});

jQuery(document).ready(function(){   

    var $inputs = jQuery('#kliks');

	jQuery('select').change(function() {

		var target = jQuery(this);

		var selected_val = target.find(':selected').val(); 

		if (selected_val === 'Received') { alert(selected_val);

			$inputs.prop('disabled', true);

		}

	    

	});



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control col-lg-10" name="id_status">
    <option value="0">Pilih</option>
    <option value="Foo">Foo</option>
    <option value="Bar">Bar</option>
    <option value="Received">Received</option>
  </select>

<input type="text" name="kliks" id="kliks" value="xyz">