1

我正在尝试从复选框组中动态添加和删除输入。下面的示例有效，但是当输入被删除时，我在最后一个输入项上不再得到圆角边缘。它只是切断。我认为运行 checkboxradio('refresh') 可以解决问题，但事实并非如此。有任何想法吗？

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>
4

1 回答 1

4

更新

根据 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 示例

于 2013-03-16T23:24:29.777 回答