Лучший способ включить / отключить элементы в форме на основе выбранного значения в раскрывающемся меню? - PullRequest
Новая
       12

Лучший способ включить / отключить элементы в форме на основе выбранного значения в раскрывающемся меню?

0 голосов
/ 14 мая 2018

У меня есть форма с полями уровня доступа. На основе выбранного значения в форме будут включены дополнительные поля. Вот пример моей формы: 

$('#frm_accesslevel').on('change',accessLevel);
function accessLevel() {
    var fldVal = $(this).val();

    switch(fldVal){
        case '1':
            break;
        case '2':
            break;
        case '3':
            break;
        case '4':
            break;
        default:
            
    }
}
<!---*** Start: JQuery 3.3.1 version and chosen files. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="Chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="Chosen/chosen.min.css">
<!---*** End: JQuery 3.3.1 version and chosen files. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" src="Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---*** End: Bootstrap 3.3.7 version files. ***--->

<form name="frmSave" id="frmSave>
  <div class=" form-group ">
    <label class="control-label " for="accessl "><span class="label label-primary ">Access Level:</span></label>
    <select class="form-control " name="frm_accesslevel " id="frm_accesslevel " required>
      <option value=" ">--Choose Level--</option>
      <option value="1 ">Level 1</option>S
      <option value="2 ">Level 2</option>
      <option value="3 ">Level 3</option>
      <option value="4 ">Level 4</option>
    </select>
  </div>
  <div class="form-group required ">
    <label class="control-label " for="region "><span class="label label-primary ">Region</span></label>
    <select class="form-control " name="frm_region " id="frm_region " required disabled></select>
  </div>
  <div class="form-group ">
    <label class="control-label " for="state "><span class="label label-primary ">State:</span></label>
    <select class="form-control " name="frm_state " id="frm_state " required disabled></select>
  </div>
  <div class="form-group ">
    <label class="control-label " for="city "><span class="label label-primary ">City:</span></label>
    <select class="form-control " name="frm_city " id="frm_city " required disabled></select>
  </div>
  <div class="row ">
    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1 ">
      <button type="submit " class="btn btn-primary ">Submit</button>
    </div>
  </div>
</form>

Мне интересно, как добиться следующего, если пользователь выбирает Level 1, тогда ни одно из отключенных полей не должно менять статус. Если выбрано Level 2, то должен быть активирован только раскрывающийся список Region, а если выбрано Level 3, то должны быть включены Region и State. Самый последний - Level 4, тогда регион, штат и город должны быть включены. Переходя назад и вперед между уровнями, я хотел бы включить / отключить поля ввода Region / State / City. Что было бы наиболее эффективным решением?

Ответы [ 2 ]

0 голосов
/ 14 мая 2018

Как насчет этого? Если выбрано более 3-х элементов, вы можете перебирать массив с именами элементов, чтобы избежать дублирования части .hasClass. 

$("#frm_accesslevel").change(function() {
    var selected = $("#frm_accesslevel option:selected");
    
    $('.enabler').each(function(){
      $(this).prop("disabled", true);
    });
    
    if(selected.hasClass('region')){
      $('#frm_region').prop("disabled", false);
    }
    if(selected.hasClass('state')){
      $('#frm_state').prop("disabled", false);
    }
    if(selected.hasClass('city')){
      $('#frm_city').prop("disabled", false);
    }
});
<!---*** Start: JQuery 3.3.1 version and chosen files. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="Chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="Chosen/chosen.min.css">
<!---*** End: JQuery 3.3.1 version and chosen files. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" src="Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---*** End: Bootstrap 3.3.7 version files. ***--->

<form name="frmSave" id="frmSave">
  <div class=" form-group">
    <label class="control-label" for="accessl"><span class="label label-primary">Access Level:</span></label>
    <select class="form-control" name="frm_accesslevel" id="frm_accesslevel" required>
      <option value="">--Choose Level--</option>
      <option value="1">Level 1</option>S
      <option value="2" class="region">Level 2</option>
      <option value="3" class="region state">Level 3</option>
      <option value="4" class="region state city">Level 4</option>
    </select>
  </div>
  <div class="form-group required">
    <label class="control-label" for="region"><span class="label label-primary">Region</span></label>
    <select class="form-control enabler" name="frm_region" id="frm_region" required disabled></select>
  </div>
  <div class="form-group ">
    <label class="control-label" for="state"><span class="label label-primary ">State:</span></label>
    <select class="form-control enabler" name="frm_state" id="frm_state" required disabled></select>
  </div>
  <div class="form-group">
    <label class="control-label" for="city "><span class="label label-primary ">City:</span></label>
    <select class="form-control enabler" name="frm_city" id="frm_city" required disabled></select>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>
0 голосов
/ 14 мая 2018

Вы должны попробовать что-то вроде этого: 

$('#frm_accesslevel').on('change', function(){

var fldVal = $(this).val(); // you have access to this here, not outside

 switch(+fldVal) {//cast as number with +
    case 1:
        alert("nothing happen");
        break;
    case 2:
        $(".form-control").hide();//hide all
        $("#frm_region").show();
        $("#frm_accesslevel").show();
        break;
    case 3:
        alert("behavior");
        $(".form-control").show();//show all
        break;
    case 4:
        alert("other behavior");
        $(".form-control").show();//show all
        break;
    default:
        alert("somethig wrong");
} 

});

Имейте в виду, у вас есть ошибки в html, некоторые "отсутствуют, и у вас есть пробелы в свойствах id.

это простои функциональный пример https://jsfiddle.net/k2nuq3h3/5/

...