inputタグとlabelタグをつなげて中身のリンクだけはクリック出来るようにする方法
タイトルがわけわからんと思うが、想定しているのはよくあるフォームの最後にある同意ボタン。
こういうの
ただの同意ボタンならlabel内にinputタグ書けば文字まで全部クリッカブルになるのでそれでおしまい。
けど今回はそうじゃなくて画像のように
チェックボックス＋POPUPテキストボタン＋文字
となっているパターン。
普通に作るとこの真中のPOPUPがうまく動作しなくなってしまうので、対策としては下記のようにすれば良い。
チェックボックス（display:none）＋チェックボックス風の疑似要素（before）＋POPUPテキストボタン＋文字
これをコードで表現すると下記のようになる。
378 <div class="agreeArea"> 379 <input type="checkbox" name="Account[agree]" id="agree" maxlength="100" class="" required> 380 <label for="agree"> 381 <a href="javascript:void(0)" class="popupBtn">応募規約</a>に同意する 382 </label> 383 </div> 385 <!-- ポップアップ --> 386 <div id="popupBody" class="popup"> 387 <span class="btn_close"> 388 <img src="../../img/btn_close.png"> 389 </span> 390 <div class="term">
363 #frm #agree{ 364 display:none; 365 } 366 #frm .agreeArea label{ 367 padding: 0 0 0 45px; 368 margin:15px 0 0; 369 } 370 #frm .agreeArea label a{ 371 color:#aaa; 372 } 373 #frm .agreeArea label::before{ 374 -webkit-transition: opacity 0.2s linear; 375 transition: opacity 0.2s linear; 376 position: absolute; 377 top: 50%; 378 left: 10px; 379 display: block; 380 margin-top: -12px; 381 width: 8px; 382 height: 16px; 383 border-right: 3px solid #aaa; 384 border-bottom: 3px solid #aaa; 385 content: ''; 386 opacity: 0; 387 -webkit-transform: rotate(45deg); 388 -ms-transform: rotate(45deg); 389 transform: rotate(45deg); 390 } 391 #frm .agreeArea input:checked + label:before{ 392 opacity:1; 393 } 394 #frm .agreeArea label::after{ 395 -webkit-transition: border-color 0.2s linear; 396 transition: border-color 0.2s linear; 397 position: absolute; 398 top: 50%; 399 left: 0px; 400 display: block; 401 margin-top: -17px; 402 width: 30px; 403 height: 30px; 404 border: 1px solid #eeeeee; 405 content: ''; 406 }
49 // POPUPボタンクリック時top 50 this.$document.on('click', '.popupBtn', function(e){ 51 var $popup = $('#popupBody'); 52 $popup.toggleClass('active'); 53 }); 54 // 終了ボタンクリック時top 55 this.$document.on('click', '.btn_close', function(e){ 56 var $popup = $('#popupBody'); 57 $popup.removeClass('active'); 58 }); 59 // バツボタン以外でも閉じる 60 this.$document.on('click', function(e){ 61 if(!$(e.target).closest('.popupBtn').length && !$(e.target).closest('. term').length){ 62 var $popup = $('#popupBody'); 63 $popup.removeClass('active'); 64 } 65 });
aタグをspanとかにしてしまうと完全に無効化されてしまって
POPUPもされなくなってしまうので注意。
