アンカーコンテナの下部にチェックボックスを追加した後にチェックボックスがクリックされない

Question

div内のアンカータグとして結果カードが定義された旅行ウェブサイトの検索結果ページに新しいチェックボックスを追加しようとしています。以下のような何かを：

<div class="cards"> 
    <a href="some link">Some Information</a> 
    <div id="price"> Price</div> 
    ..... 
</div> 

さて、このアンカータグのリンクは全体cards div要素の上にあります。このcard div内のチェックボックスを右下に追加しようとしていますが、チェックボックスにチェックを入れようとすると、Some Informationリンクがカード全体にオーバーレイされてクリックが発生します。以下は

私のチェックボックス用のコードです：

<div id="myContainer"> 
    <input type="checkbox" name="myCheckbox" id="myCheckbox" value="red"> 
    <label for="myCheckbox_01_item" class="text">Add to Compare</label> 
</div> 

とCSS：私は左下にそれを保管しております場合

@CHARSET "UTF-8"; 

/* Main Classes */ 
.text{ 
    position: relative; 
    /* margin-top: .70588235rem; */ 
    color: #3e3e3e; 
    margin: 13px 11px; 
    float: right; 
} 
#myCheckbox{ 
    transform: scale(2); 
/* margin: 10px; */ 
} 

#myContainer { 
    outline: black dashed 1px; 
    width: 238px; 
    background-color: #ffcb00; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    margin-top: auto; 
} 


#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) { 
    display: inline-block; 
    width: 15px; 
    height: 25px; 
    border: black solid 1px; 
    background: #FFF ; 
    margin: 12px 13px; 
    float: left; 
} 

#myContainer input[type="checkbox"][name="myCheckbox"]:checked { 
    display: inline-block; 
    width: 15px; 
    height: 25px; 
    border: black solid 1px; 
    background: #00355f; 
    margin: 12px 13px; 
    float: left; 
} 

#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text { 
    line-height: 18px; 
    font: normal 12px arial; 
    display: inline-block; 
    line-height: 27px; 
    vertical-align: top; 
    margin: 5px 0px; 
} 

また、それはカードのdivボックスの下に表示され、正常に動作します。 2つの画像をPFAして、UIについてのアイデアを得てください。

右チェックボックス：

Answer 1

あなたはアンカータグ内に配置し、チェックボックスを選択します。まず、アンカータグのhref値を削除する必要があります（mouseoverのcheckbox要素を使用している場合）。 jqueryを使ってサンプルスニペットを作成しました。見てください。チェックボックスをマウスオーバー

$(".checkbox-container").mouseover(function(){ 
$("a").attr("href", "") 
}); 

サンプルHTML

<a href="#"> 
<div class="checkbox-container"> 
<input type="checkbox" value="some value">Some Value 
</div> 

</a> 

ホープこれは