如何启用我的按钮选中复选框

时间:2017-11-17 10:49:48

标签: javascript

function addHeadCol(row, dindex) {
    var td = document.createElement('TD');
    td.setAttribute("class", "bs-checkbox print_hide");
    var chk = document.createElement("input");
    chk.setAttribute("data-index", dindex);
    chk.name = "btSelectItem";
    chk.type = "checkbox";
    td.appendChild(chk);
    row.appendChild(td);
}

此代码动态创建复选框。我想启用一个按钮,选中复选框?

1 个答案:

答案 0 :(得分:0)

请在下面找到工作解决方案:

function display() {
  alert('hello!');
}

function addHeadCol(row, dindex) {
  var td = document.createElement('TD');
  td.setAttribute("class", "bs-checkbox print_hide");
  var chk = document.createElement("input");
  chk.setAttribute("data-index", dindex);
  chk.name = "btSelectItem";
  chk.className = "chk"
  chk.type = "checkbox";
  chk.addEventListener("change", function(e) {
    checkboxes = document.getElementsByClassName('chk');
    var disableButton = true;
    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked) {
        disableButton = false;
      }
    }
    document.getElementById("btn").disabled = disableButton;
  });
  td.appendChild(chk);
  row.appendChild(td);
}

addHeadCol(document.getElementById('row1'), 1)
addHeadCol(document.getElementById('row2'), 2)
addHeadCol(document.getElementById('row3'), 3)
addHeadCol(document.getElementById('row4'), 4)
<table>
  <tr id="row1"></tr>
  <tr id="row2"></tr>
  <tr id="row3"></tr>
  <tr id="row4"></tr>
</table>
<button id="btn" disabled onclick="display()">Click Me!</button>