Флажок не меняется в зависимости от значения переключателя

Question

У меня есть веб-приложение с 2 радиокнопками и 1 флажком

Сценарий: в соответствии со значением радиокнопки, оно должно изменить статус флажка флажка.

Html code

                <div class="form-group">
                  <label>Is Main Meal</label>
                  <div class="radio">
                    <label>
                      <input type="radio" name="inputMeal" value="1" checked> Main Meal
                    </label>
                  </div>
                  <div class="radio">
                    <label>
                      <input type="radio" name="inputMeal" value="0"> Sub Meal
                    </label>
                  </div>
                </div>


                <div class="form-group">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" name="chkIsPricing"> Is Pricing
                        </label>
                      </div>
                    </div>

Код Jquery

 $('input[name="inputMeal"]').on('change', function () {
        var val = $("input[name='inputMeal']:checked").val();
        if (val == "0") {
            $('input[name="chkIsPricing"]').attr('checked', true);
        } else {
            $('input[name="chkIsPricing"]').attr('checked', false);
        }
    });

Это хорошо работает в первые 2 клика.

Шаг 1: Нажмите «Под едой»радиокнопка и флажок установлены на проверенный статус.(Успех)

Шаг 2: Нажмите кнопку «Основной прием пищи» и установите флажок в непроверенный статус (Успех)

Шаг 3: еще раз нажмите кнопку «Под питание»и флажок остаются как непроверенный статус.(Сбой)

Каждый раз, когда я время от времени нажимаю обе радиокнопки, флажок остается как непроверенный статус.Могу ли я знать, где проблема в моем коде?Что мне интересно, так это то, что в первых двух щелчках (смена переключателя) отображается сценарий успеха, а после этого флажок не меняется в зависимости от значения переключателя.

Дополнительная информация

jQuery-2.1.4
HTML5

Answer 1

     //Onchange function
     $('input[type="radio"]').bind('change', function(){
				if($(this).val()==0){
					$('input[type="checkbox"]').prop('checked', false);
				}else{
					$('input[type="checkbox"]').prop('checked', true);
				}
			})
      //onload function
			var inputMeal = $('input[type="radio"]:checked').val();
			if(inputMeal==1){
				$('input[type="checkbox"]').prop('checked', true);
			}

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

<div class="form-group">
                  <label>Is Main Meal</label>
                  <div class="radio">
                    <label>
                      <input type="radio"  name="inputMeal" value="1" checked> Main Meal
                    </label>
                  </div>
                  <div class="radio">
                    <label>
                      <input type="radio" name="inputMeal" value="0" > Sub Meal
                    </label>
                  </div>
                </div>


                <div class="form-group">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" name="chkIsPricing"> Is Pricing
                        </label>
                      </div>
                    </div>

Answer 2

Вот еще одна реализация:

$("input[type=radio][name='inputMeal']").on("change", function() {
     switch($(this).val()) {
         case '0':
             $('input[name="chkIsPricing"]').prop('checked', true);
             break;
         case '1':
             $('input[name="chkIsPricing"]').prop('checked', false);
             break;
     }
});

Answer 3

С помощью .attr() вы устанавливаете значение атрибута в дереве DOM.В зависимости от браузера, версии браузера и версии jQuery (особенно 1.6), это не всегда дает желаемый эффект.

Используя .prop(), вы манипулируете свойством (в данном случае, «проверенное состояние»).Я настоятельно рекомендую использовать .prop() в вашем случае, поэтому следующее будет правильно переключаться:

$('input[name="chkIsPricing"]').prop('checked', true);

JsFiddle: https://jsfiddle.net/c7qn4k9g/1/

Для получения дополнительной информации, пожалуйста, обратитесь к документации из .prop ().

Answer 4

Используйте опору вместо атрибута

$('input[name="inputMeal"]').on('change', function () {
    var val = $("input[name='inputMeal']:checked").val();
    if (val == false) {
        $('input[name="chkIsPricing"]').prop('checked', true);
    } else {
        $('input[name="chkIsPricing"]').prop('checked', false);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
   <label>Is Main Meal</label>
   <div class="radio">
      <label>
      <input type="radio" name="inputMeal" value="1" checked> Main Meal
      </label>
   </div>
   <div class="radio">
      <label>
      <input type="radio" name="inputMeal" value="0"> Sub Meal
      </label>
   </div>
</div>
<div class="form-group">
   <div class="checkbox">
      <label>
      <input type="checkbox" name="chkIsPricing"> Is Pricing
      </label>
   </div>
</div>