2

チェックされたラジオボタンがクリックされたときに、ラジオボタンをチェック不可にしようとしていますが、取得できません。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が機能します！ラジオボタンのグループごとに (名前に基づいて) 2 回追加する必要があります。

$(document).delegate('.ui-page', 'pageshow', function () { code hier });にヒントコードを追加する必要があります。$(document).ready の代わりに。理由は ここで説明します

4

1 に答える 1

3

チェックしたラジオボタンのチェックを外す方法は次のとおりです。

デモ

すべてのラジオ ボタンの配列を作成する

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
  });
 });
});
于 2013-05-15T16:25:15.637 に答える