单击它时取消选中 jQuery mobile 中的单选按钮

Question

当单击选中的单选按钮时，我试图使单选按钮无法选中，但我不明白。使用 jQuery 1.9.1 和 jQuery Mobile 1.3.1。已经尝试了以前版本中的一些示例，但所有示例都不起作用。

以下在 JSFiddle 中有效，但在我尝试浏览器时无效。

JS：

var prev = {};
$('input[name*=radio-choice-]').click(function(){
    if (prev && prev.value == this.value) {
        $(this).prop('checked', !prev.status);
    }
    prev = {
        value: this.value,
        status: this.checked
    };
});

HTML：

        <div data-role="fieldcontain">
            <fieldset id="hours" class="ui-grid-b" data-role="controlgroup"
                data-type="horizontal">
                <div class="ui-block-a">
                    <div class="ui-bar ui-bar-d" style="height: 40px">
                        <input type="radio" name="radio-choice-b" id="radio-choice-1"
                            value="1"> <label for="radio-choice-1">1</label>
                    </div>
                </div>
                <div class="ui-block-b">
                    <div class="ui-bar ui-bar-d" style="height: 40px">
                        <input type="radio" name="radio-choice-b" id="radio-choice-2"
                            value="2"> <label for="radio-choice-2">2</label>
                    </div>
                </div>
                <div class="ui-block-c">
                    <div class="ui-bar ui-bar-d" style="height: 40px">
                        <input type="radio" name="radio-choice-b" id="radio-choice-3"
                            value="3"> <label for="radio-choice-3">3</label>
                    </div>
                </div>
                <div class="ui-block-a">
                    <div class="ui-bar ui-bar-d" style="height: 40px">
                        <input type="radio" name="radio-choice-b" id="radio-choice-4"
                            value="4"> <label for="radio-choice-4">4</label>
                    </div>
                </div>
                <div class="ui-block-b">
                    <div class="ui-bar ui-bar-d" style="height: 40px">
                        <input type="radio" name="radio-choice-b" id="radio-choice-5"
                            value="5"> <label for="radio-choice-5">5</label>
                    </div>
                </div>
                <div class="ui-block-c">
                    <div class="ui-bar ui-bar-d" style="height: 40px">
                        <input type="radio" name="radio-choice-b" id="radio-choice-6"
                            value="6"> <label for="radio-choice-6">6</label>
                    </div>
                </div>

                </div>
            </fieldset>

            <fieldset id="minutes" class="ui-grid-b" data-role="controlgroup"
                data-type="horizontal">
                <div class="ui-block-a">
                    <div class="ui-bar ui-bar-e" style="height: 40px">
                        <input type="radio" name="radio-choice-a" id="radio-choice-15"
                            value="15"> <label for="radio-choice-15">15</label>
                    </div>
                </div>
                <div class="ui-block-b">
                    <div class="ui-bar ui-bar-e" style="height: 40px">
                        <input type="radio" name="radio-choice-a" id="radio-choice-30"
                            value="30"> <label for="radio-choice-30">30</label>
                    </div>
                </div>
                <div class="ui-block-c">
                    <div class="ui-bar ui-bar-e" style="height: 40px">
                        <input type="radio" name="radio-choice-a" id="radio-choice-45"
                            value="45"> <label for="radio-choice-45">45</label>
                    </div>
                </div>
            </fieldset>
       </div>

    </div>

编辑：Javascript 有效！必须为不同的单选按钮组添加两次（基于名称）。

提示代码必须添加到 $(document).delegate('.ui-page', 'pageshow', function () {code hier}); 代替 $（文档）。准备好了。 原因解释here

Answer 1

这里是取消选中选中单选按钮的方法。

Demo

创建所有单选按钮的数组

var radios = [];

$('[type=radio]').each(function () {
 var id = $(this).attr('id');
 var value = $(this).attr('value');
 var status = $(this).is(':checked');
 radios.push({
  'id': id,
   'value': value,
    'status': status
 });
});

核心代码在这里...

$('[type=radio]').on('click', function () {
 var clicked = $(this);
 var id = $(this).attr('id');
 var status = $(this).is(':checked');
 var result = $.grep(radios, function (e) {
    return e.id == id;
 });
 var oldstatus = result[0].status;
 if (!oldstatus) {
  clicked.prop('checked', true).checkboxradio('refresh');
 } else {
  clicked.prop('checked', false).checkboxradio('refresh');
 }
 // Re-fill array to update changes..
 radios = [];
 $('[type=radio]').each(function () {
  var id = $(this).attr('id');
  var value = $(this).attr('value');
  var status = $(this).is(':checked');
  radios.push({
   'id': id,
    'value': value,
     'status': status
  });
 });
});