文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何将“下一步按钮”设置为在用户选择至少一个复选框之前不可用？

问如何将“下一步按钮”设置为在用户选择至少一个复选框之前不可用？
EN

Stack Overflow用户
提问于 2020-10-24 02:23:26
回答 1查看 34关注 0票数 0

你好，我使用bootstrap carousel来创建这个问题/注册表单使用bootstrap carousel的动画。在用户至少选中一个复选框之前，如何将其设置为“下一步”按钮不可用？

当涉及到javascript时，我几乎不知道它的语法，所以如果有任何帮助，我将非常感激。Javascript仍然让我非常困惑。仅供参考，在用户单击“下一步”按钮后，旋转木马动画将滑到下一部分/页面。

HTML

代码语言：javascript
复制
<div class="form-row">
    <div class="medical-question-btns btn-group btn-group-toggle btn-group-vertical"
        data-toggle="buttons">


        <!-- ============= LABEL ============= -->


        <label class="btn btn-primary my-2 pl-5" id="label_q18_a1">

            <svg class="check-box-outline-blank icon-left icon-circle"
                id="label_q18_a1" xmlns="http://www.w3.org/2000/svg"
                width="100%" viewBox="0 0 24 24">
                <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
            </svg>

            <svg class="check-box-checked icon-left icon-check-circle"
                xmlns="http://www.w3.org/2000/svg" width="100%"
                viewBox="0 0 24 24" class="bi bi-check-circle-fill">
                <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
            </svg>

            <input type="checkbox" name="q18_a1" id="q18_a1"
                autocomplete="off">
            <p>Any condition where sex is not advised</p>
        </label>

        

        <label class="btn btn-primary my-2 pl-5" id="label_q18_a2">
            <svg class="check-box-outline-blank icon-left icon-circle"
                id="label_q18_a1" xmlns="http://www.w3.org/2000/svg"
                width="100%" viewBox="0 0 24 24">
                <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
            </svg>

            <svg class="check-box-checked icon-left icon-check-circle"
                xmlns="http://www.w3.org/2000/svg" width="100%"
                viewBox="0 0 24 24" class="bi bi-check-circle-fill">
                <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
            </svg>
            <input type="checkbox" name="q18_a2" id="q18_a2"
                autocomplete="off">
            <p>Kidney problems including having had a kidney transplant</p>
        </label>

        <label class="btn btn-primary my-2 pl-5" id="label_q18_a3">
            <svg class="check-box-outline-blank icon-left icon-circle"
                id="label_q18_a1" xmlns="http://www.w3.org/2000/svg"
                width="100%" viewBox="0 0 24 24">
                <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
            </svg>

            <svg class="check-box-checked icon-left icon-check-circle"
                xmlns="http://www.w3.org/2000/svg" width="100%"
                viewBox="0 0 24 24" class="bi bi-check-circle-fill">
                <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
            </svg>
            <input type="checkbox" name="q18_a3" id="q18_a3"
                autocomplete="off">
            <p>Liver problems</p>
        </label>

        <label class="btn btn-primary my-2 pl-5" id="label_q18_a4">
            <svg class="check-box-outline-blank icon-left icon-circle"
                id="label_q18_a1" xmlns="http://www.w3.org/2000/svg"
                width="100%" viewBox="0 0 24 24">
                <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
            </svg>

            <svg class="check-box-checked icon-left icon-check-circle"
                xmlns="http://www.w3.org/2000/svg" width="100%"
                viewBox="0 0 24 24" class="bi bi-check-circle-fill">
                <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
            </svg>
            <input type="checkbox" name="q18_a4" id="q18_a4"
                autocomplete="off">
            <p>Neurological problems like multiple sclerosis or motor neuron
                disease</p>
        </label>

        <label class="btn btn-primary my-2 pl-5" id="label_q18_a5">
            <svg class="check-box-outline-blank icon-left icon-circle"
                id="label_q18_a1" xmlns="http://www.w3.org/2000/svg"
                width="100%" viewBox="0 0 24 24">
                <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
            </svg>

            <svg class="check-box-checked icon-left icon-check-circle"
                xmlns="http://www.w3.org/2000/svg" width="100%"
                viewBox="0 0 24 24" class="bi bi-check-circle-fill">
                <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
            </svg>
            <input type="checkbox" name="q18_a5" id="q18_a5"
                autocomplete="off">
            <p>HIV</p>
        </label>

        <label class="btn btn-primary my-2 pl-5" id="label_q18_a6">
            <svg class="check-box-outline-blank icon-left icon-circle"
                id="label_q18_a1" xmlns="http://www.w3.org/2000/svg"
                width="100%" viewBox="0 0 24 24">
                <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
            </svg>

            <svg class="check-box-checked icon-left icon-check-circle"
                xmlns="http://www.w3.org/2000/svg" width="100%"
                viewBox="0 0 24 24" class="bi bi-check-circle-fill">
                <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
            </svg>
            <input type="checkbox" name="q18_a6" id="q18_a6"
                autocomplete="off">
            <p>Spinal injury or paralysis</p>
        </label>

        <label class="btn btn-primary my-2 pl-5" id="label_q18_a7">
            <svg class="check-box-outline-blank icon-left icon-circle"
                id="label_q18_a1" xmlns="http://www.w3.org/2000/svg"
                width="100%" viewBox="0 0 24 24">
                <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
            </svg>

            <svg class="check-box-checked icon-left icon-check-circle"
                xmlns="http://www.w3.org/2000/svg" width="100%"
                viewBox="0 0 24 24" class="bi bi-check-circle-fill">
                <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
            </svg>
            <input type="checkbox" name="q18_a7" id="q18_a7"
                autocomplete="off">
            <p>Previous surgery on your prostate or pelvis</p>
        </label>

        <label class="btn btn-primary my-2 pl-5" id="label_q18_a8">
            <svg class="check-box-outline-blank icon-left icon-circle"
                id="label_q18_a1" xmlns="http://www.w3.org/2000/svg"
                width="100%" viewBox="0 0 24 24">
                <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
            </svg>

            <svg class="check-box-checked icon-left icon-check-circle"
                xmlns="http://www.w3.org/2000/svg" width="100%"
                viewBox="0 0 24 24" class="bi bi-check-circle-fill">
                <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
            </svg>
            <input type="checkbox" name="q18_a8" id="q18_a8"
                autocomplete="off">
            <p>Radiation therapy to your pelvis</p>
        </label>

        <label class="btn btn-primary my-2 pl-5" id="label_q18_a9">
            <svg class="check-box-outline-blank icon-left icon-circle"
                id="label_q18_a1" xmlns="http://www.w3.org/2000/svg"
                width="100%" viewBox="0 0 24 24">
                <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
            </svg>

            <svg class="check-box-checked icon-left icon-check-circle"
                xmlns="http://www.w3.org/2000/svg" width="100%"
                viewBox="0 0 24 24" class="bi bi-check-circle-fill">
                <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
            </svg>
            <input type="checkbox" name="q18_a9" id="q18_a9"
                autocomplete="off">
            <p>None apply</p>
        </label>

        <!-- ============= LABEL ============= -->
    </div>
</div>

按钮HTML

代码语言：javascript
复制
<div class="form-group">
    <div class="form-row col">
        <div class="col mt-3 text-right">
            <a href="#medical-carousel" role="button" data-slide="prev">
                <label class="btn my-4 btn-lg btn-lightgray btnNavigate"
                    id="med_questions_back">
                    <svg class="icon-dark" width="1em" height="1em" viewBox="0 0 16 16"
                        fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z">
                        </path>
                    </svg>
                    Back
                </label>
            </a>
        </div>

        <!-- NEXT BUTTON -->

        <div class="col mt-3 text-left">
            <!-- SLIDE NEXT BUTTON -->
            <label class="btn my-4 btn-lg btn-green btnNavigate" id="med_questions_next"
                data-target="#medical-carousel" role="button" data-slide="next">
                Next
                <svg class="icon-dark" width="1em" height="1em" viewBox="0 0 16 16"
                    class="bi bi-chevron-right" fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                </svg>
            </label>
            <!-- SLIDE NEXT BUTTON -->


        </div>

    </div>
</div>
javascript
html
css
bootstrap-4
EN

回答 1

Stack Overflow用户

发布于 2020-10-24 03:06:16

这是JS的一个简单任务，如下所示。您可以使用复选框上的onlick事件来运行脚本。然后，该脚本检查所有声明的复选框是否已选中。如果选中了单个按钮，则会显示该按钮。

​

代码语言：javascript
复制
function nextButton() {
  var one = document.getElementById("one"),
      two = document.getElementById("two"),
      three = document.getElementById("three"),
      next = document.getElementById("next");
  if (one.checked == false &&
     two.checked == false &&
     three.checked == false) {
       next.style.display = "none";
  } else {
    next.style.display = "block";
  }
}
代码语言：javascript
复制
#next {
  display: none;
}
代码语言：javascript
复制
<label>
  <input type="checkbox" name="one" id="one" onclick="nextButton()" autocomplete="off">Checkbox #1
</label>
<br>
<label>
  <input type="checkbox" name="two" id="two" onclick="nextButton()" autocomplete="off">Checkbox #2
</label>
<br>
<label>
  <input type="checkbox" name="three" id="three" onclick="nextButton()" autocomplete="off">Checkbox #3
</label>
<br><br>
<button id="next">Next</button>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/64505478

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档