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有效！必须为不同的radiobutton组添加两次（基于名称）。

提示必须添加代码 $（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
  });
 });
});

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

1 个答案: