允许在引导复选框文本中单击链接

-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

允许在引导复选框文本中单击链接

回答

相关问题