javascript - JQM 选择器可折叠字段集

Question

我正在使用 Jquery mobile 作为表单/输入字段集。我需要能够检查字段集中的字段是否完整/具有值。

当可折叠链接关闭时，我需要检测所有字段之一是否有值，如果没有，则应向可折叠链接添加一个类。

我无法使用选择器的ID，因为这将跨越具有不同数量字段集的不同部分。

我的问题是我使用的选择器是否错误以及如何修复它？

代码:

JQUERY:

$('a.ui-icon-minus').on('click',function(){
            if($('fieldset:not(.ui-collapsible-collapsed) input[type="radio"]').is(':checked') || $('fieldset:not(.ui-collapsible-collapsed) textarea').val()){
                if($('fieldset:not(.ui-collapsible-collapsed) input[type="radio"]').is(':checked') && $('fieldset:not(.ui-collapsible-collapsed) textarea').val()){
                        $('div.ui-collapsible-heading a').addClass("complete");
                        $('div.ui-collapsible-heading a').removeClass("half-complete");
                        $('div.ui-collapsible-heading a').removeClass("incomplete");
                        alert("complete");
                } else {
                    $('div.ui-collapsible-heading a').addClass("half-complete");
                    $('div.ui-collapsible-heading a').removeClass("incomplete");
                    alert("half-complete");
                }
            } else {
                $('div.ui-collapsible-heading a').addClass("incomplete");
                alert("incomplete");
            }
        });

HTML 字段集:

<fieldset data-collapsed="false" data-iconpos="right" data-role="collapsible" id="bc1">
    <div class="ui-collapsible-heading ui-collapsible-heading-collapsed" role="heading">
        <a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-inherit ui-icon-plus"href="#">BC1 <span class="ui-collapsible-heading-status">click to expand contents</span></a>
    </div>
    <div aria-hidden="true" class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed">
    <legend>BC1</legend>
        <p>All bank accounts are opened in line with Group Treasury approval.</p>
        <div class="ui-field-contain">
            <label>Control in Place?</label>
            <div data-role="controlgroup" data-type="horizontal">
                <input id="bc1-ry" name="bc1" type="radio" value="Y">
                <label for="bc1-ry">Yes</label> <input id="bc1-rn" name="bc1" type="radio" value="N">
                <label for="bc1-rn">No</label>
            </div>
            <label for="bc1-v">Verification</label> 
            <textarea id="bc1-v" name="bc1-v"></textarea>
            <label for="bc1-c">Comments</label> 
            <textarea id="bc1-c" name="bc1-c"></textarea>
        </div>
    </div>
</fieldset>

Answer 1

尝试使用这样的事件处理程序(未测试的代码):

$( ".ui-collapsible" ).on( "collapsiblecollapse", function( event, ui ) {
   var incomplete = false;
   // find all inputs and check them
   $(event.target).find('input,textarea').each(function(idx,ele){
          // here check if the input has valid value
          // e.g.
          incomplete |= $(ele).val()=='';
   })
   // toggle incomplete class on the <a> element
   $('div.ui-collapsible-heading a', $(event.target)).toggleClass('incomplete',incomplete);
} );

希望有帮助。