2015-10-07 2 views
1

После проверки флажка, когда я выбираю другой вариант раскрывающегося списка, он по-прежнему остается отмеченным. Я хочу снять этот флажок, когда я выбираю другой вариант, но это не так. Код не работает, когда я использую bootstrap css. Где ошибка?JavaScript checkbox check related issue

HTML:

<select class="form-control job-subcategory" autocomplete="off" name="job_subcategory"> 
    <option class="sub-catg-options" value="">Select Sub-Category(Optional)</option> 
    <option class="electric-subcategory" value="Emergency Electricians">Emergency Electricians</option> 
    <option class="electric-subcategory" value="Alarm Installer">Alarm Installer</option> 
    <option class="electric-subcategory" value="Electrical Lighting">Electrical Lighting</option> 
    <option class="electric-subcategory" value="Back Up Generators">Back Up Generators</option> 
</select> 

<label class="residen-label">Type of services you require</label> 

    <div class="btn-group" data-toggle="checkbox"> 
     <span class="button-checkbox"> 
      <button type="button" class="btn electric-appliances" data-color="primary">Wiring</button> 
      <input type="checkbox" value="Wiring" name="ts-requires" class="hidden" /> 
     </span> 

     <span class="button-checkbox electric-ppoints"> 
      <button type="button" class="btn electric-appliances" data-color="primary">Powerpoints</button> 
      <input type="checkbox" value="Powerpoints" name="ts-requires" class="hidden" /> 
     </span> 

     <span class="button-checkbox light-fittings"> 
      <button type="button" class="btn electric-appliances" data-color="primary"> light-fittings</button> 
      <input type="checkbox" value="Lighting fittings" name="ts-requires" class="hidden" /> 
     </span> 

     <span class="button-checkbox electric-appliance"> 
      <button type="button" class="btn electric-appliances" data-color="primary">Appliances</button> 
      <input type="checkbox" value="Appliances" name="ts-requires" class="hidden" /> 
     </span> 

     <span class="button-checkbox"> 
      <button type="button" class="btn electric-appliances" data-color="primary">Solar Power</button> 
      <input type="checkbox" value=" Solar Power" name="ts-requires" class="hidden" /> 
     </span> 

     <span class="button-checkbox"> 
      <button type="button" class="btn electric-appliances" data-color="primary"> Switchboards</button> 
      <input type="checkbox" value="Switchboards" name="ts-requires" class="hidden" /> 
     </span>   

     <span class="button-checkbox"> 
      <button type="button" class="btn electric-appliances" data-color="primary">Other</button> 
      <input type="checkbox" value="Srequire Other" name="ts-requires" class="hidden" /> 
     </span>        

    </div>   

</div> 

Мой JS код:

$('.job-subcategory').change(function() { 
    if ($('.job-subcategory').val() == "Emergency Electricians") { 
     $(':checkbox').prop('checked', false); 
    } 
    else if ($('.job-subcategory').val() == "Alarm Installer") { 
     $(':checkbox').prop('checked', false); 
    } 
    else if ($('.job-subcategory').val() == "Electrical Lighting") { 
     $(':checkbox').prop('checked', false);  
    } 
    else if ($('.job-subcategory').val() == "Back Up Generators") { 
     $(':checkbox').prop('checked', false);  
    } 

    $('.btn-group').find('button-checkbox').removeClass('active'); 

    }); 
+0

'$ (': checkbox')' универсальный селектор, это выберет все флажки на странице – Tushar

+1

, почему вы не используете переключатель? – Chris

+0

Я использовал радиокнопку в другом месте, но в этом месте мне нужно использовать флажок – Fameless

ответ

0

Mukto вы хотите изменить ваш вход введите код будет выглядеть следующим образом.

<input type="radio" value="Srequire Other" name="ts-requires" class="hidden" /> 

тип = «Радио» позволяет пользователю выбрать только один пункт в то время, и автоматически выбирает де-другой, если он выбран! Надеюсь это поможет!

+0

. Я использовал этот тип в другом месте, но в этом месте мне нужно несколько выбрать – Fameless

+0

Не забудьте присвоить такое же «имя» всем переключателям, которые вы хотите те же группировки, чтобы браузер знал, что нужно отменить выбранное в данный момент автоматически при выборе другого. Чтобы дать пользователю изменение, чтобы выбрать «none», создайте еще одну радиокнопку с надписью «Нет выбора» и сделайте ее выбранной по умолчанию при загрузке страницы. Пользователь получит эту идею. –