Question

我正在尝试动态添加和删除复选框组中的输入。下面的示例有效，但是当删除输入时，我不会在最后一个输入项上获得圆角。它只是切断了。我认为运行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>

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

jQuery Mobile，显示/隐藏复选框/收音机并更新显示的输入

1 个答案: