私のようなテンプレート持つチェックボックス自体

Question

を無効にすることなく、チェックボックスの機能の行全体をクリック可能にします：

{% if websites %} 
     <h3>Delete websites:</h3> 
     <div class="row"> 
      {% for website in websites %} 
       <div class="row checkbox"> 
        <h4> 
        <div class="col-md-2"> 
        {{ website.name }}: 
        </div> 

        <div class="col-md-2 col-md-offset-1"> 
         {{ website.url}} 
        </div> 

        <div class="col-md-1 col-md-offset-1"> 
         <input type="checkbox" name="delete_website" value="{{ website.id}}"> 
        </div> 
        </h4> 
       </div> 
      {% endfor %} 

     </div> 
    {% endif %} 

    ... 

<script type="text/javascript"> 

    $('.checkbox').click(function(){ 
     ($(this).find(":checkbox").prop("checked", !$(this).find(":checkbox").prop("checked"))); 
    }); 

</script> 

をそれは行がそうどこでも "から、クリック可能でなければなりません

を作成しますwebapi "をクリックしてチェックボックスをオンにするか、チェックボックスをオフにします。つまりjquery funcは名前（webapi）とurl（http://..。）と3つの空白の間の空白で動作しますが、チェックボックスをクリックすると無効になります。これはおそらくアクションを倍増させるためです（チェックをクリックするとfuncのチェックが外されます）。この時だけ「.checkbox」としての行の最初の2つの要素をラップし、現在のチェックボックスをクリックし、再び働く

 <h3>Delete websites:</h3> 
     <div class="row"> 
      {% for website in websites %} 
       <div class="row"> 
        <div class="checkbox"> 
         <h4> 
         <div class="col-md-2"> 
         {{ website.name }}: 
         </div> 

         <div class="col-md-2 col-md-offset-1"> 
          {{ website.url}} 
         </div> 
        </div> 

        <div class="col-md-1 col-md-offset-1"> 
         <input type="checkbox" name="delete_website" value="{{ website.id}}"> 
        </div> 
        </h4> 
       </div> 
      {% endfor %} 

     </div> 
    {% endif %} 

    ... 

<script type="text/javascript"> 

    $('.checkbox').click(function(){ 
     ($(this).find(":checkbox").prop("checked", !$(this).find(":checkbox").prop("checked"))); 
    }); 

</script> 

...しかし、行の残りの部分をクリックすると、変更されません：私は、に変更します（恐らく.find(':checkbox')が機能しなくなったためです）。チェックボックス自体をクリックして非アクティブにすることなく、この行をクリック可能にするにはどうすればよいですか？私はこれをHTMLで別のタスク用に実装しましたが、1ビットが好きではない空白をクリックしても機能しませんでした。私の主な目標は、ボックス自体をクリックするとボックスをダブルチェックしないようにJSを修正することです。そのため、ユーザーは行の任意の場所をクリックしてボックスをチェックできますが、行のテキストはそのままコピー/貼り付けできます。あなたのマークアップを修正する必要があります。まず

$('.checkbox').click(function(){ 
 
     ($(this).find(":checkbox").prop("checked", !$(this).find(":checkbox").prop("checked"))); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row checkbox"> 
 
        <h4> 
 
        <div class="col-md-2"> 
 
        webapi: 
 
        </div> 
 
        
 
        <div class="col-md-2 col-md-offset-1"> 
 
         http://127.0.0.1:8001/status/ 
 
        </div> 
 
        
 
        <div class="col-md-1 col-md-offset-1"> 
 
         <input type="checkbox" name="delete_website" value="2"> 
 
        </div> 
 
        </h4> 
 
       </div>

Answer 1

ありがとうございます。 bootstrapあたりとして「コンテンツは、列内に配置されなければならない、そして唯一の列が行の直下の子かもしれ 。」 だからあなたのマークアップは次のようにする必要があります：あなたは、クラスなどを割り当てることができます

<div class="row checkbox"> 
     <div class="col-md-4"> 
      <div class="clickable"> 
       webapi: 
      </div> 

     </div> 
     <div class="col-md-4"> 
      <div class="clickable"> 
       http://127.0.0.1:8001/status/ 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div> 
       <input type="checkbox" class="the-checkbox" name="delete_website" value="2"> 
      </div> 
     </div> 
    </div> 

次に、 。クリックイベントをバインドするすべての要素をクリックできます。

$(document).ready(function() { 
     $(".clickable").on("click",function(){ 
      var theCheckBox=$(this).closest(".checkbox").find(".the-checkbox"); 
      theCheckBox.prop("checked",!theCheckBox.prop("checked")); 

     }); 
    }); 

Answer 2

JavaScriptの解決策もあります。しかし、行全体にラベルを配置してチェックボックスにリンクする方法を示すために、私は以下の例を作成しました。

ただし、ラベルは行のオーバーレイであるため、他の行要素へのマウスアクセスをブロックします。これにより、ユーザーが行のテキストを選択するのが難しくなります。

.row { 
 
    position: relative; 
 
} 
 

 
label.overlay { 
 
    /* Position inside the nearest positioned element, in this case the row. */ 
 
    position: absolute; 
 
    /* Make it fill that parent element. */ 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    
 
    /* Some shade, just to show the area in this demo */ 
 
    background-color: rgba(0,0,0,0.1); 
 
}

<div class="row checkbox"> 
 
    <h4> 
 
    <div class="col-md-2"> 
 
     webapi: 
 
    </div> 
 

 
    <div class="col-md-2 col-md-offset-1"> 
 
     http://127.0.0.1:8001/status/ 
 
    </div> 
 

 
    <div class="col-md-1 col-md-offset-1"> 
 
     <input type="checkbox" name="delete_website" value="2" id="cb_delete_website_2"> 
 
     <label class="overlay" for="cb_delete_website_2"></label> 
 
    </div> 
 
    </h4> 
 
</div>