jQuery Mobile，顯示/隱藏複選框/收音機和更新顯示的輸入

Question

我試圖動態添加和刪除複選框組的輸入。下面的例子可以工作，但是當輸入被移除時，我不會在最後一個輸入項目上得到圓角邊緣。它只是切斷。我認爲運行checkboxradio（'刷新'）會糾正這些問題，但事實並非如此。有任何想法嗎？

if(some condition) { 
    $('.hideThis').hide(); 
    $('[name=values]').checkboxradio('refresh'); 
} else { 
    $('.hideThis').show(); 
    $('[name=values]').checkboxradio('refresh'); 
} 

<div data-role="fieldcontain"> 
    <fieldset data-role="controlgroup"> 
     <input type="checkbox" name="values" id="val1" value="val1"> 
     <label for="val1">Value 1</label> 
     <input type="checkbox" name="values" id="val2" value="val2"> 
     <label for="val2">Value 2</label> 
     <div class="hideThis"> 
      <input type="checkbox" name="values" id="val3" value="val3"> 
      <label for="val3">Value 3</label> 
     </div> 
    </fieldset> 
</div> 

Answer 1

更新

基礎上OP評論，下面jQuery Mobile的V1.3.0作品答案。

對於jQuery Mobile的V1.2.0，而不是ui-last-child類，使用ui-corner-bottom和ui-controlgroup-last類最後複選框。

原來的答覆 「jQuery Mobile的V1.3.0」

末複選框有ui-last-child造型。因此，當您隱藏/刪除最後一個複選框時，JQM不會將該類添加到上一個複選框。因此，您必須通過將ui-last-child樣式添加到以前的複選框來隱藏其中。

如果您隱藏第一個複選框，請改用ui-first-child。

標記

<a href="#" data-role="button" id="hidethis">hide this</a> 

<form> 
<fieldset data-role="controlgroup"> 
    <legend>Vertical:</legend> 
    <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a"> 
    <label for="checkbox-v-2a">One</label> 
    <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b"> 
    <label for="checkbox-v-2b">Two</label> 
    <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c"> 
    <label for="checkbox-v-2c">Three</label> 
</fieldset> 
</form> 

JQM

$(document).on('click', 'a#hidethis', function() { 
$('div.ui-checkbox:last-child').prev('div').find('label').addClass('ui-last-child'); 
$('div.ui-checkbox:last-child').hide(); 
}); 

JSFiddle Example