单击其中的 bootstrap 切换按钮时如何禁用锚标记单击

Question

我是 BootstrapToggle 的新手，我在这样的锚标记内使用 Bootstrap 切换按钮：

这是代码片段：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<a onclick="alert('hello'); return false;">
   <span>Hello World</span>
   
   <input type="checkbox" data-toggle="toggle" data-on="Accepted" data-off="Rejected" data-onstyle="success">
        
</a>

现在，如果我切换按钮，锚标记警报也会被调用。我只想要我的要切换的按钮如果我更改它，则在这种情况下不应调用锚标记警报。

如有任何帮助，我们将不胜感激。

Answer 1

而不是这个：

<a onclick="alert('hello'); return false;">

使用

<a href="javascript:void(0);">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<a href="javascript:void(0);">
   <span>Hello World</span>
   
   <input type="checkbox" data-toggle="toggle" data-on="Accepted" data-off="Rejected" data-onstyle="success">
        
</a>

Answer 2

我建议你使用，因为我遇到了同样的问题。

<a href="javascript:void(0);">

Answer 3

用锚包裹按钮是一个奇怪的解决方案，但如果这是你想要的...

你可以尝试类似的东西

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<a href="javascript:void(0);">
   <span id="MySpan">Hello World</span>
   
   <input type="checkbox" data-toggle="toggle" data-on="Accepted" data-off="Rejected" data-onstyle="success">
        
</a>

<script>

$('#MySpan').click(function() {

alert('hello world');
});

</script>

单击其中的 bootstrap 切换按钮时如何禁用锚标记单击

How to disable anchor tag click when clicked on bootstrap toggle button inside it

html

javascript

jquery

togglebutton

twitter-bootstrap