取消選中單選按鈕上單擊它

Question

我試圖讓單選按鈕uncheckable，點擊選中的單選按鈕的時候，但我不明白這一點。使用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的作品！必須爲不同組的單選按鈕添加兩次（根據名稱）。

提示代碼必須被添加到 $（文件）.delegate（ 'UI頁。'， 'pageshow'，函數（）{代碼票數}）; 而不是 $（document）.ready。 原因解釋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 
    }); 
}); 
});