Question

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

对于第一个条件，我认为作为替代方案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>

第一个条件 - ＆gt;复选框列表或文本框：

<?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>

第二个条件 - ＆gt;第二个复选框：

<p style="color: red; font-weight: bold;">I have read and agree to the terms and conditions
            <input type="checkbox" id="termsChkbx" onchange="isChecked(this,'sub1')"/></p>

第三个条件 - ＆gt;选项列表：

<section id="placeOrder">
            <h2>Place order</h2>
            Your details
            Customer Type: <select id="show" name="customerType" onchange="change(this)">
                <option value="">Customer Type?</option>
                <option value="ret">Customer</option>
                <option value="trd">Trade</option>
            </select>

提交按钮：

<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>

Answer 1

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

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
}

声明用于addEventListener

的函数

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);

示例： http://jsfiddle.net/qjo9rqgc/

按钮启用3条件

1 个答案: