允許在引導複選框文本中單擊鏈接

-1

我正在使用Bootstrap和FontAwesome的組合來創建一些可觸摸訪問的複選框控件。作爲複選框的文本標籤的一部分，我想包括一個鏈接到另一個頁面，但它似乎並沒有工作。我猜在Bootstrap JavaScript中有一個stopPropagation（）調用正在導致這個問題，但是我找不到解決方法。我的HTML代碼如下。允許在引導複選框文本中單擊鏈接

<div class="btn-touch btn-group btn-group-vertical" data-toggle="buttons"> 
    <label class="btn" for="cbAgree"> 
     <input id="cbAgree" type="checkbox" name="cbAgree" /> 
     <i class="fa fa-square-o fa-2x"></i> 
     <i class="fa fa-check-square-o fa-2x"></i> 
     <span>I agree to the <a href='http://www.google.com' target='_blank'>Terms & Conditions</a></span> 
    </label> 
</div>

這裏是一個更好的說明了國際空間站的一個小提琴： https://jsfiddle.net/bepsh3wt/

來源

2017-01-27 mjhixson

http://stackoverflow.com/questions/24755802/a-link-inside-a-label-also-triggers-the-checkbox-how-to-prevent – cbrawl

感謝，認爲做到了。 – mjhixson

鏈接cbrawl提供瞭解決方案。下面的jQuery解決了我的問題，謝謝！

$('.btn-touch').on('click', 'label a', function (e) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    window.open($(this).attr('href'), $(this).attr('target')); 
    return false; 
});

來源

2017-01-27 03:45:54 mjhixson

我更新了你的例子這裏：https://jsfiddle.net/bepsh3wt/4/

它需要<form>標籤和可選，您可以隱藏輸入：複選框

<div class="btn-touch btn-group btn-group-vertical" data-toggle="buttons"> 
<form> 
    <label class="btn" for="MainContent_MainContent_lvTrip_cbYCJAgree_0"> 
     <input id="MainContent_MainContent_lvTrip_cbYCJAgree_0" type="checkbox" name="ctl00$ctl00$MainContent$MainContent$lvTrip$ctrl0$cbYCJAgree" /> 
     <i class="fa fa-square-o fa-2x"></i> 
     <i class="fa fa-check-square-o fa-2x"></i> 
     <span>I agree to the <a href='/Terms' target='_blank'>Terms & Conditions</a></span> 
    </label> 
</form> 
</div>

來源

2017-01-27 02:55:25

允許在引導複選框文本中單擊鏈接

回答

相關問題