Добавьте «требуется», чтобы выбрать поле

Question

У меня есть поле выбора страны, в котором отображается поле выбора штата, если выбраны США.Для этого я использую следующий jQuery:

$(function() {
    $('#country').change(function(){
        $('.state').hide();
        $('#' + $(this).val()).show();
    }).trigger('change');
});

Можно ли как-то изменить вышеприведенное, чтобы также добавить обязательный атрибут в поле выбора штата, если выбран США?

Поле выбора состояния находится в следующих DIV

<div id="USA" class="state" style="display:none">

</div>

Большое спасибо,

Джон

Answer 1

Для этого используйте метод prop():

$("#country").on("change", function() {
  let $state = $("#state");
  
  if ($(this).val() == "EUA") {
    $state.prop("required", "required");
  }
  else {
    $state.prop("required", null);
  }
}).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <select id="country">
    <option>EUA</option>
    <option>Other</option>
  </select>

  <select id="state">
    <option></option>
    <option>A</option>
    <option>B</option>
  </select>
  
  <button>Save</button>
</form>

• prop("required", "required") чтобы добавить собственность;
• prop("required", null) чтобы удалить его.

Answer 2

Сначала вам может понадобиться проверить выбранное значение, затем вы можете использовать prop()/removeProp():

$(function() {
    $('#country').change(function(){
        var selected_value = $(this).val();
        var state   = $(".state");
        var related_elem = $('#' + selected_value);

        if( selected_value === 'USA' ){
            state.prop('required', true).show();
            related_elem.show();
        }else{
            state.removeProp('required').hide();
            related_elem.hide();
        }
    }).trigger('change');
});