Question

I have a select menu with about four options. The first option of the select menu has NO value. The other options have values. When a user selects an option that has a value, I need the checkbox disabled, otherwise, if they go back to the option with the blank value, the checkbox is re-enabled.

The code below successfully disables the checkbox, BUT I want the checkbox to be re-enabled when the user clicks on the first blank option of the select menu.

$(document).ready(function(){
$('#select-menu').change(function() {
  if ($(this).val() !== ':first-child') { 
        $("#related-checkbox").attr("disabled", true);
  } else {
    $("#related-checkbox").attr("disabled", false);
            }
});
});

Answer 1

The statement says

if ($(this).val() !== ':first-child') { 

literally checks if selected value string is ‘first-child’, not whether it is the first child. Just set it to blank

if ($(this).val() !== '') { 

If you want to check whether it is the first option (not whether it is blank) then you can compare the first child’s val to the selected element’s val

if ($(this).val() == $(this).children(':first-child').val())