代码之家 › 专栏 › 技术社区 › th3g3ntl3man

单击<a>文本以检查输入

bootstrap-4 jquery javascript

th3g3ntl3man · 技术社区 · 6 年前

<a> 复选框是否激活?现在,当有人点击复选框的文本时,下拉菜单关闭。这是一个简单的片段:

<div id="divChooseMacro" class="dropdown-menu" aria labelledby="choose-macro">
    <a class='dropdown-item' data-value='pippo' style='cursor: pointer;'> 
        <input type='checkbox' value='pippo'/>&nbsp; pippo 
    </a>
</div>

我试着设定一个 cursor: pointer 在标签中 <a> 但没有成功

2 回复 | 直到 6 年前

Canta 6 年前

我建议您使用label tag将其与复选框关联起来。另外,我在您的代码中插入了一些不同的语义标记:可以随意更改回去。

关于下拉关闭,您可以停止click事件以在复选框处传播切换其复选框,这样click的引导事件侦听器就不会被触发

<ul id="divChooseMacro" class="dropdown-menu" aria labelledby="choose-macro">
  <li class='dropdown-item' data-value='pippo' style='cursor: pointer;'> 
    <label class='dropdown-item' onclick='event.stopPropagation();'> 
      <input type='checkbox' value='pippo'/>&nbsp; pippo 
    </label>
  </li>
</ul>

Carsten Løvbo Andersen Dan Nemtanu 6 年前

a 变成一个 label

演示

<div id="divChooseMacro" class="dropdown-menu" aria labelledby="choose-macro">
    <label class='dropdown-item' data-value='pippo' style='cursor: pointer;'> 
        <input type='checkbox' value='pippo'/>&nbsp; pippo 
    </label>
</div>

<div id="divChooseMacro" class="dropdown-menu" aria labelledby="choose-macro">
    <label class='dropdown-item' data-value='pippo' style='cursor: pointer;'> 
        <input type='checkbox' value='222'/>&nbsp; 222 
    </label>
</div>

推荐文章

seriously · 按钮中元素的对齐

2 年前

USK · 引导模型在我的HTML文件中不起作用

2 年前

onit · 如何在单击按钮时从页面(引导程序4)隐藏或删除搜索表单?

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

user9644796 · 如何检查折叠的导航栏是否打开?

6 年前

JoeSlav · 使用引导上载损坏的文件

6 年前

John · 引导程序4,表单内联未在XS视图上对齐

6 年前

J. Sparks · 奇怪的图像定位(HTML、CSS、Bootstrap)

6 年前

user9719859 · 如何在bootstrap 4中更改选择选项programmaticaly?

6 年前

im5an · 如何使用angular在单行中显示徽标和导航栏?

6 年前