現在、オプションが選択されたときにクラスを入力ラベルに添付するフォームがあります。iCheck プラグインを使用する前は、問題なく動作していました。クラス「.frmLabel」を見つけて「.frmLabelChecked」のクラスを追加するために、基本的に一連の親を実行しています。私の選択とテキスト入力では機能しますが、ラジオとチェックボタンでは機能しません。
私が見ることができるものから、iCheck プラグインはフォームのスタイリングに追加の div 要素を追加するので、parent() を追加すると問題が解決するようです。少し面倒ですが、使用しているウィジェットが動的に取り込まれているため、これが最善の方法です。
実際の例はここにあります: http://bvp.dmediastudios.com icheck なしのバージョン (動作) はhttp://bvp.dmediastudios.com/v4/です。
コードは次のとおりです。
$('.frmInput input[type=radio]').click(function () {
// buy or lease options, have to seperate functions for each option since the html structure is different for each one so a all size fits solution using parent() is not possible (that I know of) - very lame. BETTER DONE THAN PERFECT!
if ($('.frmInput input[type=radio]').is(':checked')) {
// parent(1) = #harwidget, parent(2) = #homefinderform, parent(3) .frmRow - find .frmLabel
$(this).parent().parent().parent().parent().find('.frmLabel').addClass('frmLabelChecked');
}
});
チェックボックスのコード
$('#divBuyType').on('click', 'input:checkbox', function () {
$(this).parent().parent().parent().parent().find('.frmLabel').toggleClass('frmLabelChecked', this.checked);
});
非動作バージョンはここにあります: bvp.dmediastudios.com、動作バージョン (iCheck なし) はここにあります: bvp.dmediastudios.com/v4/
上記の関数が参照する html のブロックは次のとおりです。
<div id="mywidget3A0A581997704AA41EB19FFEC804E593" style="text-align:left;">
<div style="width:450px;height:520px;" id="widgetOuter">
<div id="widgetContainer">
<div class="widgetHeader" style="display: none;">
<div class="widgetRight">
<div class="widgetMidd">
<div class="widgetTitle">Home Finder</div>
<div class="widgetBackBtn" id="hartab3A0A581997704AA41EB19FFEC804E593" style="display:none;">
<img src="" onclick="showSearch('3A0A581997704AA41EB19FFEC804E593')" style="cursor:pointer;">
</div>
<div class="titleBar" id="titleBar3A0A581997704AA41EB19FFEC804E593"></div>
</div>
</div>
</div>
<div class="widgetBody">
<span id="widgetBodyDiv" style="height:438px;" onscroll="fixTip('3A0A581997704AA41EB19FFEC804E593');">
<div id="harwidget3A0A581997704AA41EB19FFEC804E593" style="padding: 10px; display: block;">
<form name="homefinderform" method="get" class="forms" id="homefinderform">
<div class="frmRow">
<div class="frmLabel">Buy or Lease :</div>
<div class="frmInput">
<span>
<div class="iradio_minimal-grey checked" style="position: relative;">
<input type="radio" name="For_Sale" value="1" checked="" onclick="showBuyDiv(this)" class="radioButton" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Buy</span>
<span>-</span>
<span>
<div class="iradio_minimal-grey" style="position: relative;">
<input type="radio" name="For_Sale" value="0" onclick="showLeaseDiv(this)" class="radioButton" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Lease</span>
</div>
</div>
<div class="frmRow">
<div class="frmLabel">Property Type</div>
<div class="frmInput">
<div id="divBuyType">
<span>
<div class="icheckbox_minimal-grey checked" style="position: relative;">
<input name="PROPERTY_CLASS_ID" value="1" type="checkbox" style="width: 20px; position: absolute; opacity: 0;" checked="">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Single Family Homes
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROPERTY_CLASS_ID" value="2" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Townhouse/Condo
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROPERTY_CLASS_ID" value="6" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Highrise Condominium
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROPERTY_CLASS_ID" value="3" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Residential Lots & Land
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROPERTY_CLASS_ID" value="4" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Multi-Family
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROPERTY_CLASS_ID" value="5" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Homes and/or Acreage</span>
</div>
<div id="divLeaseType" style="display:none;">
<span>
<div class="icheckbox_minimal-grey checked" style="position: relative;">
<input name="PROP_TYPE" value="'SGL'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;" checked="">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Single Family Homes
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROP_TYPE" value="'THC'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Townhouse/Condo
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROP_TYPE" value="'HIR'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Highrise Condominium
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROP_TYPE" value="'LOT'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Residential Lots & Land
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROP_TYPE" value="'MLT'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Multi-Family
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROP_TYPE" value="'ACR'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Homes and/or Acreage
<div class="br">
<br>
</div>
</span>
</div>
</div>
</div>
<!--Start Select Fields-->
どんな助けでも大歓迎です。ページ自体で html を表示する方が簡単な場合があります。