jQuery Мобильный непроверенный, если проверен другой элемент

Question

Я не могу найти здесь ошибку.

jsFiddle ->http://jsfiddle.net/bagofmilk/472s8/

Я просто хочу, чтобы сделать это так, чтобы:

Сценарий 1:
- Пользователь проверяет кучу флажков.
- проверка пользователя "Я ненавижу фрукты"
- Все остальные флажки снимите проверяется, за исключением "I Hate Фрукты"

Сценарий 2:
- Пользователь уже "I Hate Fruit" проверил.
- Пользователь нажимает на любой другой флажок.
- Флажок «I Hate Fruit» автоматически снят.

HTML:

<div data-role='page' id='page1'> 
<section id='squestion2c' class='quest'> 
    <h4>What are your Favorite Fruits?</h4> 
    <span style='font-style:italic;'> (check all that apply)</span> 

    <input type='checkbox' class='fruits' id='apples' name='favoriteFruits' data-mini='true'/> 
    <label for='apples'>Apples</label> 
    <input type='checkbox' class='fruits' id='bananas' name='favoriteFruits' data-mini='true'/> 
    <label for='bananas'>Bananas</label> 
    <input type='checkbox' class='fruits' id='canteloupe' name='favoriteFruits' data-mini='true'/> 
    <label for='canteloupe'>Canteloupe</label> 
    <input type='checkbox' class='fruits' id='strawberries' name='favoriteFruits' data-mini='true'/> 
    <label for='strawberries'>Strawberries</label> 
    <input type='checkbox' class='fruits' id='raspberries' name='favoriteFruits' data-mini='true'/> 
    <label for='raspberries'>Raspberries</label> 
    <input type='checkbox' class='fruits' id='blueberries' name='favoriteFruits' data-mini='true'/> 
    <label for='blueberries'>Blueberries</label> 
    <input type='checkbox' class='fruits' id='hatefruit' name='favoriteFruits' data-mini='true'/> 
    <label for='hatefruit'>I Hate Fruit</label> 
    </section> 
</div> 

JQuery:

$(document).ready(function() { 

    $(".fruits").change(function() { 
    if ($('#hatefruit').is(":checked")) { 
     $('.fruits').prop('checked', false); 
     $('#hatefruit').prop('checked', 'checked'); 
    } else { 
     $('#hatefruit').prop('checked', false); 
    } 
    }); 

}); 

Answer 1

Прежде всего, вы не должны использовать .ready() в JQuery Mobile. Во-вторых, когда вы установите/сняли флажок или переключатель с ошибкой, вам нужно переустановить его, используя .checkboxradio("refresh").

Чтобы связать событие, используйте pageinit, поскольку он срабатывает один раз на страницу, это гарантирует, что вы не добавите несколько слушателей в тот же элемент.

Поскольку все флажки имеет то же .fruits, проверьте, если проверил один имеет hatefruit ID. Соответственно, отметьте/снимите галочку.

$(document).on("pageinit", "#page1", function() { 
    $(".fruits").on("change", function() { 
     if ($(this).is(":checked") && this.id == "hatefruit") { 
      $('.fruits').prop('checked', false).checkboxradio("refresh"); 
      $(this).prop('checked', true).checkboxradio("refresh"); 
     } else { 
      $('#hatefruit').prop('checked', false).checkboxradio("refresh"); 
     } 
    }); 
}); 

Demo