скрытие поля в форме, когда выбрано значение

Question

Я пытаюсь получить следующую функцию рабочего, но это не так и я не могу понять, почему

<script type="text/javascript"> 
    function hideLevel() { 
     if if isNaN($('#id_course')) { 
      $('#id_level').hide(); 
      $('#level').hide(); 
      $('#id_level').parents('.control-group').hide(); 
     } 
    } 
    $(document).ready(hideLevel); 
    $('#id_course').change(hideLevel); 
</script> 

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

Вот HTML код формы:

<form class="form-horizontal"> 

    <div class="control-group"> 
     <label class="control-label">Cours</label> 
      <div class="controls"> 
       <select id="id_course" name="course"> 
        <option value="" selected="selected">---------</option> 
        <option value="nl">Néerlandais</option> 
        <option value="fr">Français</option> 
        <option value="01">Anglais</option> 
        <option value="02">Allemand</option> 
        <option value="03">Latin</option> 
       </select><br> 

      </div> 
    </div> 


    <div class="control-group"> 
     <label class="control-label">Niveau</label> 
      <div class="controls"> 
       <ul id="id_level"> 
        <li> 
         <label for="id_level_0"><input class="level" id="id_level_0" name="level" type="checkbox" value="1" /> 1ère secondaire</label> 
        </li> 
        <li> 
         <label for="id_level_1"><input class="level" id="id_level_1" name="level" type="checkbox" value="2" /> 2ème secondaire</label> 
        </li> 
        <li> 
         <label for="id_level_10"><input class="level" id="id_level_3" name="level" type="checkbox" value="4" /> 4ème secondaire</label> 
        </li></ul><br> 

      </div> 
    </div> 


    <div class="form-actions"> 
    <br><br> 
     <div class="col-md-6 col-md-offset-2"> 
      <input type="submit" value="Publier" /><br><br><br> 
     </div> 
    </div> 
</form> 

Я учусь Jquery, но в этом простом сценарии, я просто не могу видеть, где проблема :(

Вот это jsfiddle:. http://jsfiddle.net/dvryqvLz/1/

---- 
EDIT 
---- 

теперь я понимаю, что эта проблема является функцией IsNaN и я не объясняет, почему я хочу использовать его, пожалуйста, простите меня за то, что

У меня есть два вида курса и, основываясь на курсе, я хочу, чтобы какое-то поле исчезло. Моя идея состояла в том, чтобы провести различие между числом и строкой. Одна категория будет иметь значения как строку, а другая - как число. Функция должна просто отличать, является ли значение числом или нет, и если это так, поля должны исчезнуть.

В любом случае, спасибо за ответы :)

Answer 1

Вы пропустите скобки () в if состоянии:

if !isNaN($('#id_course')) { 

Должно быть:

if (!isNaN($('#id_course'))) { 

А также вы должны использовать .val() для получить значение выбранного элемента в состоянии:

if (!isNaN($('#id_course').val())) {  

Вы можете использовать:

$(function(){ //Ready function 
    hideLevel(); 
    $('body').on('change', '#id_course', function(){ 
     hideLevel(); 
    }); 
}); 

Вместо:

$(document).ready(hideLevel); 
$('#id_course').change(hideLevel); 

Примечание: в примере сильфонные вы можете увидеть пункт еще добавил, потому что при выборе другого элемента со значением числа вы должны снова отображать поля.

Надеюсь, это поможет.

---

function hideLevel() { 
 
    if (isNaN($('#id_course').val()) || $('#id_course').val() == "") { 
 
     $('#id_level').show(); 
 
     $('#level').show(); 
 
     $('#id_level').parents('.control-group').show(); 
 
    }else{ 
 
     $('#id_level').hide(); 
 
     $('#level').hide(); 
 
     $('#id_level').parents('.control-group').hide(); 
 
    } 
 
} 
 

 
$(function(){ //Ready function 
 
    hideLevel(); 
 

 
    $('#id_course').on('change', function(){ 
 
     hideLevel(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="form-horizontal"> 
 

 
    <div class="control-group"> 
 
     <label class="control-label">Cours</label> 
 
      <div class="controls"> 
 
       <select id="id_course" name="course"> 
 
        <option value="" selected="selected">---------</option> 
 
        <option value="nl">Néerlandais</option> 
 
        <option value="fr">Français</option> 
 
        <option value="01">Anglais</option> 
 
        <option value="02">Allemand</option> 
 
        <option value="03">Latin</option> 
 
       </select><br> 
 
          
 
      </div> 
 
    </div> 
 

 
     
 
    <div class="control-group"> 
 
     <label class="control-label">Niveau</label> 
 
      <div class="controls"> 
 
       <ul id="id_level"> 
 
        <li> 
 
         <label for="id_level_0"><input class="level" id="id_level_0" name="level" type="checkbox" value="1" /> 1ère secondaire</label> 
 
        </li> 
 
        <li> 
 
         <label for="id_level_1"><input class="level" id="id_level_1" name="level" type="checkbox" value="2" /> 2ème secondaire</label> 
 
        </li> 
 
        <li> 
 
         <label for="id_level_10"><input class="level" id="id_level_3" name="level" type="checkbox" value="4" /> 4ème secondaire</label> 
 
        </li></ul><br> 
 
          
 
      </div> 
 
    </div> 
 
       
 

 
    <div class="form-actions"> 
 
    <br><br> 
 
     <div class="col-md-6 col-md-offset-2"> 
 
      <input type="submit" value="Publier" /><br><br><br> 
 
     </div> 
 
    </div> 
 
</form>

Answer 2

isNan является функцией, которая используется для проверки, если выполняется следующее значение может быть преобразовано в ряд или нет. Это не будет применение к элементу. Вы должны использовать свойство .length, чтобы проверить, существует ли этот элемент.

if($('#id_course').length > 0) 
{ 
    $('#id_level').hide(); 
    $('#level').hide(); 
    $('#id_level').parents('.control-group').hide(); 
} 

Чтобы проверить значение для NaN:

if(!isNaN($('#id_course').val())) 
    { 
    $('#id_level').hide(); 
    $('#level').hide(); 
    $('#id_level').parents('.control-group').hide(); 
    } 

Answer 3

Вы проверяете isNaN($("#id_course")) в то время как вы, вероятно, хотите, чтобы проверить, если значение $("#id_course") не «» (пустая строка). !isNaN в этом случае не является правильной функцией для использования, потому что он вернет true даже для пустой строки.

function hideLevel() { 
    if ($('#id_course').val()!="") { 
     $('#id_level').hide(); 
     $('#level').hide(); 
     $('#id_level').parents('.control-group').hide(); 
    } 
} 
hideLevel(); 
$('#id_course').change(hideLevel); 

Вы можете просмотреть рабочую jsFiddle здесь: http://jsfiddle.net/dvryqvLz/5/

---

EDIT
Я первый думал, что вы хотите, чтобы скрыть группу, когда есть вариант выбран, теперь я понимаю, что вы, вероятно, хотите скрыть группу, когда есть нет выбранная опция. В этом случае вы можете использовать isNaN:

function hideLevel() { 
    if (!isNaN($('#id_course').val())) { 
     $('#id_level').hide(); 
     $('#level').hide(); 
     $('#id_level').parents('.control-group').hide(); 
    }else{ 
     $('#id_level').show(); 
     $('#level').show(); 
     $('#id_level').parents('.control-group').show(); 
    } 
} 

http://jsfiddle.net/dvryqvLz/6/