невозможно отключить элементы ввода с помощью jQuery после выбора опции

Question

Я использовал jquery 3.4.1 для этого я пытался отключить элементы ввода, когда выбрано другое значение.

$(document).ready(function() {
  $('form input[name="spouseName"]').prop("disabled", true);
  $('form input[name="children"]').prop("disabled", true);
  $("form select option [value='married']").change(function() {
    $('form input[name="spouseName"]').prop("disabled", false);
    $('form input[name="children"]').prop("disabled", false);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form>
  <select class="form-control" name="maritalStatus" id="maritalStatus">
    <option value="Married">Married</option>
    <option selected value="UnMarried">UnMarried</option>
    <option value="Male Widow">Male Widow</option>
    <option value="FeMale Widow">FeMale Widow</option>
    <option value="Divorcee">Divorcee</option>
  </select>
  <input type="text" class="form-control" name="spouseName" id="spouseName" aria-describedby="spName" placeholder="Spose Name">
  <input type="text" class="form-control" name="children" id="children" aria-describedby="childrens" placeholder="Children">
</form>

Answer 1

Событие «при изменении» связано с выбором, а не с опцией

Таким образом, вы должны работать с «если ... еще» в обоих случаях значений в выборе «женат» или нет

Таким образом, я делаю это изменение в вашем коде, и он работает правильно

$(document).ready(function() {
  $('form input[name="spouseName"]').prop("disabled", true);
  $('form input[name="children"]').prop("disabled", true);
  $("form select").change(function() {
  	if(this.value === 'Married'){
  		$('form input[name="spouseName"]').prop("disabled", false);
    	$('form input[name="children"]').prop("disabled", false);
  	}else{
  		$('form input[name="spouseName"]').prop("disabled", true);
  		$('form input[name="children"]').prop("disabled", true);
  	}    
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form>
  <select class="form-control" name="maritalStatus" id="maritalStatus">
    <option value="Married">Married</option>
    <option selected value="UnMarried">UnMarried</option>
    <option value="Male Widow">Male Widow</option>
    <option value="FeMale Widow">FeMale Widow</option>
    <option value="Divorcee">Divorcee</option>
  </select>
  <input type="text" class="form-control" name="spouseName" id="spouseName" aria-describedby="spName" placeholder="Spose Name">
  <input type="text" class="form-control" name="children" id="children" aria-describedby="childrens" placeholder="Children">
</form>

Answer 2

При change событии вы должны проверить значение выбранного параметра. Также для удаления атрибута вы можете использовать .removeAttr().

Попробуйте выполнить следующее:

$(document).ready(function(){
  $('form input[name="spouseName"]').prop("disabled", true);
  $('form input[name="children"]').prop("disabled", true);

  $("form select").change(function(){
    if($(this).val() == 'Married'){
      $('form input[name="spouseName"]').removeAttr("disabled")
      $('form input[name="children"]').removeAttr("disabled")
    }
    else{
      $('form input[name="spouseName"]').prop("disabled", true);
      $('form input[name="children"]').prop("disabled", true);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select class="form-control" name="maritalStatus" id="maritalStatus">
    <option value="Married">Married</option>
    <option selected value="UnMarried">UnMarried</option>
    <option value="Male Widow">Male Widow</option>
    <option value="FeMale Widow">FeMale Widow</option>
    <option value="Divorcee">Divorcee</option>
  </select>
  <input type="text" class="form-control" name="spouseName" id="spouseName" aria-describedby="spName" placeholder="Spose Name">
  <input type="text" class="form-control" name="children" id="children" aria-describedby="childrens" placeholder="Children">
</form>

Answer 3

Вы можете попробовать требуемое решение с условиями. Пожалуйста, проверьте ниже код

$(document).ready(function() {
  $('form input[name="spouseName"]').prop("disabled", true);
  $('form input[name="children"]').prop("disabled", true);
  $("#maritalStatus").change(function() {
  		if($(this).val() !=='UnMarried'){
  	        $('form input[name="spouseName"]').prop("disabled", false);
           $('form input[name="children"]').prop("disabled", false);		
  		}else{
  			$('form input[name="spouseName"]').prop("disabled", true);
            $('form input[name="children"]').prop("disabled", true);
  		}
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select class="form-control" name="maritalStatus" id="maritalStatus">
    <option value="Married">Married</option>
    <option selected value="UnMarried">UnMarried</option>
    <option value="Male Widow">Male Widow</option>
    <option value="FeMale Widow">FeMale Widow</option>
    <option value="Divorcee">Divorcee</option>
  </select>
  <input type="text" class="form-control" name="spouseName" id="spouseName" aria-describedby="spName" placeholder="Spose Name">
  <input type="text" class="form-control" name="children" id="children" aria-describedby="childrens" placeholder="Children">
</form>

Answer 4

Вы не упомянули, что не работает, но ваш onChange не будет работать.

Селектор css имеет пробел

option [value='married']

Должно быть:

option[value='married']