2017-06-19 1 views
1

ラベルとチェックボックスがあります。ラベルをクリックすると、目的のアクションが実行されます。チェックボックスは何もしません。有効にするか無効にするかはクリックしないでください。私は入力の内側と外側の両方にラベルを移動しましたが、何も動かないようです。すべてのコードは以下の通りです。チェックボックスは機能しませんが、ラベルは

home_filters.html.erb:

<span id="listing-search-sentence-transit" style="display: none;">I'd like to live near <a tabindex="0" class="button btn-transparent" id="listing-transit-selector" role="button" data-toggle="popover">these trains.</a></span> 
<span id="listing-search-sentence-fee" style="display: none;">Only find me <a tabindex="0" class="button btn-transparent" id="listing-no-fee-selector" role="button" <%= f.check_box :no_fee %> <%= f.label :no_fee, "no fee listings." %> </a></span> 
<span id="listing-search-sentence-pets" style="display: none;"> <a tabindex="0" class="button btn-transparent" id="listing-pets-selector" role="button" data-toggle="popover"><%= f.label :pets %></a></span> 


<div id="test-content" class="hide"> 
    <div class="container-fluid"> 
    <label id="label-sentence-fee" class="general-text-label" for="sentence-fee"><input type="checkbox" name="label-sentence-fee" id="sentence-fee"> No Fee Listing</label><br> 
    <label id="label-sentence-transit" class="general-text-label" for="sentence-transit"><input type="checkbox" name="label-sentence-transit" id="sentence-transit"> Transit</label><br> 
    <label id="label-sentence-pets" class="general-text-label" for="sentence-pets"><input type="checkbox" name="label-sentence-pets" id="sentence-pets"> Pets</label><br> 
    </div> 
</div> 

.jsファイル:

$("#sentence-fee").click(function(feeEvent){ 
    feeEvent.stopPropagation(); 
    $("#listing-search-sentence-fee").toggle(); 
    $("input#sentence-fee").prop('checked', true); 
}); 

$("#sentence-transit").click(function(transitEvent){ 
    transitEvent.stopPropagation(); 
    $("#listing-search-sentence-transit").toggle(); 
    $("input#sentence-transit").prop('checked', true); 
}); 

$("#sentence-pets").click(function(petsEvent){ 
    petsEvent.stopPropagation(); 
    $("#listing-search-sentence-pets").toggle(); 
    $("input#sentence-pets").prop('checked', true); 
}); 
+0

'$( "入力#文-料")小道具(真、 '確認') ;「なぜこれをするの?あなたはいつもクリックで入力をチェックしたがっていますか? – demo

+0

@demo私はしません。ユーザーがボックスをチェックしたときのみ。 –

+0

この行を削除した場合、$( "input#sentence-fee")。prop( 'checked'、true); 'あなたがexpextしますか?ユーザーがcheckBoxをクリックすると、チェックされます。もう一度 - それはチェックされていません。このようなものはhttps://jsfiddle.net/xk9toseq/ – demo

答えて

1

ことは、あなたのために働く必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span id="listing-search-sentence-transit" style="display: none;">I'd like to live near <a tabindex="0" class="button btn-transparent" id="listing-transit-selector" role="button" data-toggle="popover">these trains.</a></span> 
 
<span id="listing-search-sentence-fee" style="display: none;">Only find me <a tabindex="0" class="button btn-transparent" id="listing-no-fee-selector" role="button" <%= f.check_box :no_fee %> <%= f.label :no_fee, "no fee listings." %> </a></span> 
 
<span id="listing-search-sentence-pets" style="display: none;"> <a tabindex="0" class="button btn-transparent" id="listing-pets-selector" role="button" data-toggle="popover"><%= f.label :pets %></a></span> 
 

 

 
<div id="test-content" class="hide"> 
 
    <div class="container-fluid"> 
 
    <label id="label-sentence-fee" class="general-text-label" for="sentence-fee"><input type="checkbox" name="label-sentence-fee" id="sentence-fee"> No Fee Listing</label><br> 
 
    <label id="label-sentence-transit" class="general-text-label" for="sentence-transit"><input type="checkbox" name="label-sentence-transit" id="sentence-transit"> Transit</label><br> 
 
    <label id="label-sentence-pets" class="general-text-label" for="sentence-pets"><input type="checkbox" name="label-sentence-pets" id="sentence-pets"> Pets</label><br> 
 
    </div> 
 
</div> 
 

 

 
<script> 
 
    $(document).ready(function() { 
 
    $("#sentence-fee").click(function(feeEvent) { 
 
     $("#listing-search-sentence-fee").toggle(); 
 
    }); 
 

 
    $("#sentence-transit").click(function(transitEvent) { 
 
     $("#listing-search-sentence-transit").toggle(); 
 
    }); 
 

 
    $("#sentence-pets").click(function(petsEvent) { 
 
     $("#listing-search-sentence-pets").toggle(); 
 
    }); 
 
    }); 
 
</script>

+0

スニペットでは動作しますが、自分のコードでは動作しません。 –

+0

@MikeWiesenhartはこれに関連するすべてのコードを表示します –

+0

他のコードを追加しました。 –

-1

また、彼はそれを持っている場合は常に、親要素のイベントを取得します。あなたは、次の例のようなコードがある場合

+0

説明できますか? –

+2

この回答は現在の状態で意味をなさない。あなたが意味するものを明確にしてください。 – Li357

+0

もし私が 'input'を含む' label'を持っていれば 'input'の' click'イベントを 'label'だけで得ることはできません。 'input'では' onChange'を使うことができます。 –

関連する問題