Question

我想使用我发现的here复选框功能，但是在我现有的页面中，我使用具有以下形式的引导程序按钮。

  <p style="color: #FFFFFF">I have read and agree to the terms and conditions
  <input type="checkbox" id="termsChkbx " onclick="change_button(this,'sub1')"/>
  </p>
  <a class="btn btn-light btn-xl disabled" href="randomlink.com">Download Now</a>

在用户单击复选框后，我应该对功能或按钮进行些什么修改才能将其启用？ PS：我在下面包括了引用的功能。

    <script type = "text/javascript">
    function change_button(checkbx,button_id) {
        var btn = document.getElementById(button_id);
        if (checkbx.checked == true) {
            btn.disabled = "";
        } else {
            btn.disabled = "disabled";
        }
    }
    </script>

Answer 1

尝试使用如下所示的按钮。将<a>标签包裹在<button>标签内。锚标记没有禁用的属性，但button有禁用的属性。

要禁用锚标记，您必须手动清除href。

function change_button(checkbx,button_id) {
    var btn = document.getElementById(button_id);
    if (checkbx.checked == true) {
        btn.disabled = false;
        btn.children[0].href = "randomlink.com";
    } else {
        btn.disabled = true;
        btn.children[0].href = "javascript: void(0)";
    }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
  <p style="color: #FFFFFF">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx " onclick="change_button(this,'sub1')"/>
</p>
<button class="btn btn-light btn-xl" disabled id="sub1">
  <a>Download Now</a>
</button>

Answer 2

这是一个基于您的代码的可运行示例。我为您的示例添加了以下内容：

<a>标记必须是<button>才能禁用它。定位标记没有禁用的属性。
必须首先禁用该按钮（因此必须添加disabled属性）。
您正在将ID作为参数传递给该函数。该ID必须等于按钮的ID。因此，我将其添加为按钮的属性。
我已经从按钮中删除了disabled类，因为当有属性disabled时，这不是必需的。
该按钮必须提交一个表单，因此您可以将其包装在<form>中，也可以在按钮上使用JavaScript单击侦听器。我在下面的解决方案中使用了第二个选项。

function change_button(checkbx,button_id) {
  var btn = document.getElementById(button_id);
  if (checkbx.checked == true) {
    btn.disabled = "";
  } else {
    btn.disabled = "disabled";
  }
}

function submit() {
  window.location.href = 'https://www.google.com';
}

body {
  background: #555 !important;
  margin: 0;
  padding: 20px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<p style="color: #FFFFFF">I have read and agree to the terms and conditions
  <input type="checkbox" id="termsChkbx" onclick="change_button(this, 'sub1')"/>
</p>
<button disabled id="sub1" class="btn btn-light btn-xl" onclick="submit()">Download Now</button>

Answer 3

只需使用checked来查看该复选框是否被选中，然后为您的按钮添加一个ID，以便您可以使用classList() JavaScript属性来切换disable类名称，具体取决于复选框的状态。

另外，避免使用内联脚本，例如onclick，并在JavaScript本身中使用事件监听器，如下所示：

let chkBox = document.getElementById("termsChkbx");
let btn = document.getElementById("someBtn");

chkBox.addEventListener("click", function() {
  if(this.checked == true) {
    btn.classList.remove("disabled");
  } else {
    btn.classList.add("disabled");
  }
});

body {background-color: #000 !important;}

<!-- Botstrap CSS File --><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><!-- Botstrap CSS File -->

<p>I have read and agree to the terms and conditions
  <input type="checkbox" id="termsChkbx"/>
</p>

<a id ="someBtn" class="btn btn-light btn-xl disabled" href="randomlink.com">Download Now</a>

带有以上代码的JSFiddle：https://jsfiddle.net/AndrewL64/k3po4zfa/1/

Answer 4

要停止单击，除了添加禁用的类之外，请将其添加到您的CSS中：

指针事件：无；

它不会阻止人们点击按钮并点击空格或进入，但会阻止人们单击

根据复选框将引导按钮从禁用更改为活动

4 个答案: