Question

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

当折叠关闭时，我需要检测所有字段中的一个是否有值，如果它们没有，它应该将类添加到可折叠链接。

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

我的问题是我使用错误的选择器，我该如何解决？

CODE：

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：

<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);
} );

希望它有所帮助。

JQM选择器可折叠字段集

1 个答案: