按钮从3条件启用

Button enabled from 3 condition

本文关键字：启用 条件 按钮      更新时间：2023-09-26

我试图让按钮只有在满足所有三个条件时才被启用，这三个条件是在第一个复选框列表中至少选择了一个复选框，第二个复选框被选中，选项列表被选中。

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

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

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

第二个条件->第二个复选框：

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

第三种条件->选项列表：

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

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

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/

相关文章：