inputタグとlabelタグをつなげて中身のリンクだけはクリック出来るようにする方法

タイトルがわけわからんと思うが、想定しているのはよくあるフォームの最後にある同意ボタン。

こういうの
f:id:hiromode:20180622195011p:plain

ただの同意ボタンなら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もされなくなってしまうので注意。