在JQuery Mobile中動態控制多個複選框

我有一個實現控件的問題，它可以多次更新一組複選框狀態（使用JQueryMobile框架定義）。在JQuery Mobile中動態控制多個複選框

非常簡單的操場代碼在這裏：http://jsfiddle.net/XR44Q/3/（使用JQuery 1.9.1和JQueryMobile 1.3.0,26行html + javascript代碼）實際上，問題比解釋的更簡單。使用組控件複選框，查看分組框在兩次單擊組控制後如何停止響應。代碼和想法就是這麼簡單，它應該只是工作:)

從的jsfiddle的代碼是在這裏以供將來參考：

HTML：

<form> 
    <input id="group_control" name="g" type="checkbox" /> 
    <label for="group_control">Group</label> 
    <fieldset data-role="controlgroup" data-type="vertical" class="sub_cat"> 
    <input id="c01" name="c01" type="checkbox" class="cXX" /> 
    <label for="c01">A</label> 
    <input id="c02" name="c02" type="checkbox" class="cXX" /> 
    <label for="c02">B</label> 
    <input id="c03" name="c03" type="checkbox" class="cXX" /> 
    <label for="c03">C</label> 
    </fieldset> 
</form>

的Javascript：

$(document).ready(function() { 
    $("#group_control").click(function() { 
    // the checkbox state can be correctly retrieved 
    alert("Group checked? "+$('#group_control').is(':checked')); 
    $("INPUT[class='cXX']").attr(
     'checked', $('#group_control').is(':checked') 
    ).checkboxradio("refresh"); 
    }); 
});

複選框可以在前兩個更改中正確更新。因此，從未經檢查的狀態開始，控件可以將所有框轉換爲檢查狀態，然後將它們轉換回未選中狀態。但是，此時，控件不能再選擇任何框。

個別複選框仍然可以由用戶在此狀態下點擊它們來控制。如果複選框被用戶修改，運行復選框控件將不起作用，如果它試圖取消選擇它們，將正確取消選擇所有框。因此，只有當控件嘗試選擇複選框組後兩次修改它們纔會出現問題。

如果你檢查頁面的DOM和屬性，你可以看到輸入由JQueryMobile產生元件正確更新下列控制活動，但「數據圖標」屬性仍然「複選框斷」當它應該轉換爲'複選框'在'。用戶點擊複選框可以正確更新此屬性，所以問題實際上是理解爲什麼'數據圖標'屬性沒有被jquery mobile正確管理。

感謝您的反饋！

來源

2013-04-04 AdilYalcin

您應該使用prop而不是attr：

$("#group_control").click(function() { 
    //alert("Group checked? "+$('#group_control').is(':checked')); 
    $("INPUT[class='cXX']").prop('checked', this.checked).checkboxradio("refresh"); 
});

工作演示：http://jsfiddle.net/XR44Q/4/

看看this thread關於屬性和屬性之間的差異。

來源

2013-04-04 18:55:28 dfsq

謝謝先生！這確實很簡單。非常感激：） – AdilYalcin 2013-04-04 19:00:37

它從沒有「檢查」屬性開始。第一次檢查時，它會得到true的檢查屬性。第二次，它更改爲false的檢查屬性 - 但它仍然有一個檢查屬性，所以它不斷試圖在該點之後將其更改爲false。您需要根據除checked選項以外的其他值進行評估。

來源

2013-04-04 18:57:05

在JQuery Mobile中動態控制多個複選框

回答

相關問題