如果选中另一个元素，jQuery Mobile 将取消选中

Question

我找不到这里的错误。

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

我只是想做到:

场景1:
- 用户选中一堆复选框。
- 用户检查“我讨厌水果”
- 除“我讨厌水果”外，所有其他复选框均未选中

场景 2:
- 用户已选中“我讨厌水果”。
- 用户单击任何其他复选框。
- “我讨厌水果”复选框会自动取消选中。

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

首先，您不应该在 jQuery Mobile 中使用 .ready()。其次，当您有问题地选中/取消选中复选框或单选按钮时，您需要使用 .checkboxradio("refresh") 重新设置其样式。

要绑定(bind)事件，请使用 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