Javascript 按钮从3状态启用

我试图使按钮仅在满足所有三个条件时启用，即在第一个复选框列表中至少选中一个复选框，在第二个复选框列表中选中第二个复选框，并选择选项列表

对于第一个条件，我认为javascript可以检查文本框的strlen吗

不知何故，下面的纯javascript不起作用，如果用户的选择相反，是否可能

纯javascript：

<script type = "text/javascript">

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById('termsChkbx').addEventListener("change", function(){
      this.parentNode.style.color = this.checked ? "black" : "red";
    }, false);
});

function change(obj) {

        var selectBox = obj;
        var selected = selectBox.options[selectBox.selectedIndex].value;
        var retCustDetails = document.getElementById("retCustDetails");
        var tradeCustDetails = document.getElementById("tradeCustDetails");

        if(selected === 'ret'){
            retCustDetails.style.display = "block";
            tradeCustDetails.style.display = "none";
        }
        else if (selected === 'trd') {
            retCustDetails.style.display = "none";
            tradeCustDetails.style.display = "block";
        }
        else if  (selected === '') {
            retCustDetails.style.display = "none";
            tradeCustDetails.style.display = "none";
    }
}

function isChecked() {
  var sum = 0; //store a running sum

  //find all price elements: class "CDPrice" within element of class "item"
  [].forEach.call(document.querySelectorAll(".item .CDPrice"), function(item) {
    //get the corresponding checkbox
    var chosen = item.parentElement.querySelector('[type="checkbox"]');

    //if checked, add to the running sum
    if (chosen.checked) {
      var value = parseFloat(item.innerHTML) || 0; //if parseFloat() returns none, default value to zero
      sum += value;
    }
  });

  //update the total
  var total = document.getElementById("total");
  total.value = sum.toFixed(2);
}    

function Checked() {
var checkedRadioButtons = document.querySelector('[name="deliveryType"]:checked');
document.getElementById("total").value = checkedRadioButtons.getAttribute("title");

}


//conditions for submit button to be enable
//var firstCondition = document.querySelectorAll('name=CDPrice');
//var termsCheckbox = document.getElementById('termsChkbx');
var show = document.getElementById('show');
var button = document.getElementById('sub1');

var conditions = {
//  cond1: false,
//  cond2: false,
  cond3: false
};

//function setCondition1(e) {
//  conditions.cond1 = e.target.checked;
//  enableButton(conditions);
//}

//function setCondition2(e) {
//  conditions.cond2 = e.target.checked;
//  enableButton(conditions);
//}

function setCondition3(e) {
  conditions.cond3 = e.target.value && e.target.value.length > 0;
  enableButton(conditions);
}

function enableButton(options) {
  if (options.cond3) {
    button.removeAttribute('disabled');
  } else {
    button.setAttribute('disabled', true);
  }
}

//for(i=0 ; i< firstCondition.length ; i++){
//  firstCondition[i].addEventListener("click", setCondition1, false);
//}
//termsCheckbox.addEventListener('change', setCondition2, false);
show.addEventListener('change', setCondition3, false);

</script>

document.addEventListener（“DOMContentLoaded”，function（））{
document.getElementById（'termsChkbx'）。addEventListener（“更改”，函数（）{
this.parentNode.style.color=this.checked？“黑色”：“红色”；
}，假）；
});
功能改变（obj）{
var-selectBox=obj；
所选变量=selectBox.options[selectBox.selectedIndex]。值；
var retCustDetails=document.getElementById（“retCustDetails”）；
var tradeCustDetails=document.getElementById（“tradeCustDetails”）；
如果（所选=='ret'）{
retCustDetails.style.display=“block”；
tradeCustDetails.style.display=“无”；
}
else if（已选==='trd'）{
retCustDetails.style.display=“无”；
tradeCustDetails.style.display=“block”；
}
else if（所选==''）{
retCustDetails.style.display=“无”；
tradeCustDetails.style.display=“无”；
}
}
函数isChecked（）{
var sum=0；//存储一个运行的sum
//查找所有价格元素：类“item”元素中的类“CDPrice”
[]forEach.call（document.querySelectorAll（“.item.CDPrice”），函数（item）{
//获取相应的复选框
var selected=item.parentElement.querySelector（'[type=“checkbox”]'）；
//如果选中，则添加到运行总和
如果（选中。选中）{
var value=parseFloat（item.innerHTML）| | 0；//如果parseFloat（）返回none，则默认值为零
总和+=数值；
}
});
//更新总数
var total=document.getElementById（“总计”）；
total.value=固定的总和（2）；
}    
函数检查（）{
var checkedRadioButtons=document.querySelector（'[name=“deliveryType”]：checked'）；
document.getElementById（“total”）.value=checkedRadioButtons.getAttribute（“title”）；
}
//启用提交按钮的条件
//var firstCondition=document.querySelectorAll（'name=CDPrice'）；
//var termsCheckbox=document.getElementById（'termsChkbx'）；
var show=document.getElementById（'show'）；
var button=document.getElementById（'sub1'）；
var条件={
//第1条：错，
//赖斯2：错，
赖斯3：错
};
//函数setCondition1（e）{
//conditions.cond1=e.target.checked；
//启用按钮（条件）；
//}
//函数setCondition2（e）{
//conditions.cond2=e.target.checked；
//启用按钮（条件）；
//}
函数setCondition3（e）{
conditions.cond3=e.target.value&&e.target.value.length>0；
启用按钮（条件）；
}
功能启用按钮（选项）{
如果（选项3）{
按钮。删除属性（“禁用”）；
}否则{
setAttribute（'disabled'，true）；
}
}
//对于（i=0；i

第一个条件->复选框列表或文本框：

<?php
include_once('database_conn.php');
$sqlCDs = 'SELECT CDID, CDTitle, CDYear, catDesc, CDPrice FROM nmc_cd b inner join nmc_category c on b.catID = c.catID WHERE 1 order by CDTitle';
$rsCDs = mysqli_query($conn, $sqlCDs);
while ($CD = mysqli_fetch_assoc($rsCDs)) {
    echo "\t<div class='item'>
            <span class='CDTitle'>{$CD['CDTitle']}</span>
            <span class='CDYear'>{$CD['CDYear']}</span>
            <span class='catDesc'>{$CD['catDesc']}</span>
            <span class='CDPrice'>{$CD['CDPrice']}</span>
            <span class='chosen'><input type='checkbox' name='CD[]' value='{$CD['CDID']}' title='{$CD['CDPrice']}'onchange='isChecked();'/></span>
        </div>\n";
}
?>


<section id="checkCost">
            <h2>Total cost</h2>
            Total <input type="text" name="total" id="total" size="10" readonly="readonly" />
        </section>

---

您可以在每个输入上附加事件侦听器并侦听更改

var firstCondition = document.querySelectorAll('input[name="testName"]');
var termsCheckbox = document.getElementById('termsChkbx');
var show = document.getElementById('show');
var button = document.getElementById('sub1');

反对保留所有条件

var conditions = {
  cond1: false,
  cond2: false,
  cond3: false
}

要与一起使用的声明函数

启用按钮

function enableButton(options) {
  if (options.cond1 && options.cond2 && options.cond3) {
    button.removeAttribute('disabled');
  } else {
    button.setAttribute('disabled', true);
  }
}

添加事件侦听器

for(i=0 ; i< firstCondition.length ; i++){
  firstCondition[i].addEventListener("click", setCondition1, false);
}
termsCheckbox.addEventListener('change', setCondition2, false);
show.addEventListener('change', setCondition3, false);

for（i=0；i

示例：
谢谢，我不知道“e”来自哪里？请允许我问一下，因为您在输入中声明name=“testName”，我可以使用“CDPrice”吗？@DLum
e
来自当您从MDN文档侦听器单击时传递的事件：当指定类型的事件发生时接收通知的对象。这必须是一个实现EventListener接口的对象，或者只是一个JavaScript函数。。。我还是不明白。。我试着再看一遍。。对于第一个条件的事件侦听器，我可以使用“.item.CDPrice”吗？我不明白。。。我尝试只使用1个条件进行测试，但两个条件都不起作用。我尝试从if语句->if（options.cond1&&options.cond2&&options.cond3）@DLum是您可以使用
name=CDPrice
中删除。第一个条件使用
[name='testName']
选择所有输入，但您可以根据需要更改选择器。我还假设firstCondition会有很多复选框，所以我迭代了一个数组。您可以在任何
EventTarget
var conditions = {
  cond1: false,
  cond2: false,
  cond3: false
}

function setCondition1(e) {
  conditions.cond1 = e.target.checked;
  enableButton(conditions);
}

function setCondition2(e) {
  conditions.cond2 = e.target.checked;
  enableButton(conditions);
}

function setCondition3(e) {
  conditions.cond3 = e.target.value && e.target.value.length > 0;
  enableButton(conditions);
}

function enableButton(options) {
  if (options.cond1 && options.cond2 && options.cond3) {
    button.removeAttribute('disabled');
  } else {
    button.setAttribute('disabled', true);
  }
}

for(i=0 ; i< firstCondition.length ; i++){
  firstCondition[i].addEventListener("click", setCondition1, false);
}
termsCheckbox.addEventListener('change', setCondition2, false);
show.addEventListener('change', setCondition3, false);