Question

我刚刚开始。我知道HTML，CSS，JavaScript，现在才学习jQuery。我有3个输入框和一个按钮。如果任何输入框为空，我不希望该按钮可单击。这就是我的代码现在的样子……

let garage = [];
const maxCars = 100;

class Car{
  constructor(year, make, model){
    this.year = year;
    this.make = make;
    this.model = model;
  }
}

$(document).ready(function() {

  $('#addCarButton').on('click', function() {
    let newCar = new Car($('#yearInput').val(), $('#makeInput').val(), $('#modelInput').val() );

    if (garage.length < maxCars){
      garage.push(newCar);
    } else {
      console.log('Sorry garage is full');
      return false;
    }

    updateGarage();

    $('#yearInput').val('');
    $('#makeInput').val('');
    $('#modelInput').val('');
  });
});

function newCar(year, make, model){
  console.log('in newCar:', year, make, model);
  garage.push(new Car(year, make, model));
  return true;
}

function updateGarage() {
  let outputElement = $('#garageList');
  outputElement.empty();
  for (let car of garage) {
      outputElement.append('<li>' + Number(car.year) + ' ' + car.make + ' ' + car.model + '</li>');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Garage</title>
  </head>
  <body>
    <h1>Garage</h1>
    
    <div id="garageDiv"></div>
    
    <div id="inputDiv">
      <input type="number" placeholder="year" id="yearInput" >
      <input type="text" placeholder="make" id="makeInput" >
      <input type="text" placeholder="model" id="modelInput" > 
      <button type="button" id="addCarButton">Add Car</button>
    </div>  
      <ul id="garageList">
      </ul>

    <script src="scripts/jquery-3.3.1.min.js" charset="utf-8"></script>
    <script src="scripts/scrap.js" charset="utf-8"></script>
  </body>
</html>

我认为解决方案将是这样...

$(document).ready(function() {
$('#addCarButton').prop('disabled', true);
  if ($('#modelInput').val().length != 0) {
  $('#addCarButton').prop('disabled', false);}
$('#addCarButton').on('click', function() {

我相信禁用/启用有效，但是我只是不知道使用什么条件。我所拥有的只是测试1个输入，但是我想要它，以便仅在每个输入中都有内容时才启用按钮。

当我运行这里的所有设备时，无论如何都将禁用该按钮。我玩了一下，如果某些随机条件成立，则可以启用它。

我还觉得我需要有一种方法可以多次运行条件检查，但是我不确定如何执行。

Answer 1

在javascript中添加了注释，以显示输入事件如何处理按钮的禁用/启用。我还将required类放在与按钮相关的输入上。

let garage = [];
const maxCars = 100;

class Car {
  constructor(year, make, model) {
    this.year = year;
    this.make = make;
    this.model = model;
  }
}

$(document).ready(function() {
  var $addCarButton = $('#addCarButton');
  var $requiredFields = $('.required');

  //capture any time the value of a required field changes
  $requiredFields.on('input', function(e) {
    //disable the button if any of the fields are blank
    $addCarButton.prop('disabled', $requiredFields.filter(function() {
      return !this.value.trim();
    }).length);
  }).trigger('input'); //trigger an input event for page load

  $('#addCarButton').on('click', function() {
    let newCar = new Car($('#yearInput').val(), $('#makeInput').val(), $('#modelInput').val());

    if (garage.length < maxCars) {
      garage.push(newCar);
    } else {
      console.log('Sorry garage is full');
      return false;
    }

    updateGarage();

    $('#yearInput').val('');
    $('#makeInput').val('');
    $('#modelInput').val('');
    $addCarButton.prop('disabled', true);
  });
});

function newCar(year, make, model) {
  console.log('in newCar:', year, make, model);
  garage.push(new Car(year, make, model));
  return true;
}

function updateGarage() {
  let outputElement = $('#garageList');
  outputElement.empty();
  for (let car of garage) {
    outputElement.append('<li>' + Number(car.year) + ' ' + car.make + ' ' + car.model + '</li>');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Garage</h1>

<div id="garageDiv"></div>

<div id="inputDiv">
  <input type="number" placeholder="year" id="yearInput" class="required">
  <input type="text" placeholder="make" id="makeInput" class="required">
  <input type="text" placeholder="model" id="modelInput" class="required">
  <button type="button" id="addCarButton">Add Car</button>
</div>
<ul id="garageList">
</ul>

<script src="scripts/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="scripts/scrap.js" charset="utf-8"></script>

Answer 2

如果发现至少一个空输入，则可以循环遍历keyup上的所有输入，并将“ flag”设置为true。

然后使用此标志启用/禁用按钮。

$(document).ready(function(){
  $('#addCarButton').prop('disabled', true);
  
  var inputs = $("#inputDiv input");
  
  inputs.on("keyup",function(){
    
    // Check all inputs
    var oneEmpty = false;
    inputs.each(function(){
      if( $(this).val() == "" ){
        oneEmpty = true;
      }
    });
    
    
    // If at least one field is empty, "oneEmpty" will be true... Disabling the button.
    $('#addCarButton').prop('disabled', oneEmpty);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="inputDiv">
  <input type="number" placeholder="year" id="yearInput" >
  <input type="text" placeholder="make" id="makeInput" >
  <input type="text" placeholder="model" id="modelInput" > 
  <button type="button" id="addCarButton">Add Car</button>
</div>

Answer 3

您处在正确的轨道上；您的条件语句可以简单地检查所有3个输入：

if (
    $('#yearInput').val().length != 0 &&
    $('#makeInput').val().length != 0 &&
    $('#modelInput').val().length != 0
) {
    $('#addCarButton').prop('disabled', false);
}

Answer 4

$(function() {

let garage    = [];
const maxCars = 100;

class Car {

    constructor(year, make, model) {

        this.year = year;
        this.make = make;
        this.model = model;
    }
}


$('#yearInput, #makeInput, #modelInput').on('input', function(event) {

    let year  = $('#yearInput').val();
    let make  = $('#makeInput').val();
    let model = $('#modelInput').val();

    if(year && make && model) {

        $('#addCarButton').prop('disabled', false);
    }
});

$('#addCarButton').on('click', function() {

    let year = $('#yearInput').val();
    let make = $('#makeInput').val();
    let model = $('#modelInput').val();

    let newCar = new Car(year, make, model);

    if (garage.length < maxCars) {

        garage.push(newCar);

    } else {

        console.log('Sorry garage is full');
        return false;
    }

    updateGarage();

    $('#yearInput').val('');
    $('#makeInput').val('');
    $('#modelInput').val('');

    $('#addCarButton').prop('disabled', true);
});

function newCar(year, make, model) {

    console.log('in newCar:', year, make, model);
    garage.push(new Car(year, make, model));
    return true;
}

function updateGarage() {
    
    let outputElement = $('#garageList');
    outputElement.empty();

    for (let car of garage) {

        outputElement.append('<li>' + Number(car.year) + ' ' + car.make + ' ' + car.model + '</li>');
    }
}

});

<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<h1>Garage</h1>

<div id="garageDiv"></div>

<div id="inputDiv">
    <input type="number" placeholder="year" id="yearInput" >
    <input type="text" placeholder="make" id="makeInput" >
    <input type="text" placeholder="model" id="modelInput" > 
    <button type="button" id="addCarButton" disabled>Add Car</button>
</div>  
<ul id="garageList">
</ul>

</body>
</html>

Answer 5

您可以在onInputChange文件中声明一个javascript方法，该方法将event变量作为输入（这样，由于具有ID，因此您知道事件的来源），并且完成此操作后，您需要做的就是使onInputChange方法根据输入的状态更改按钮的状态。

HTML

<input type="number" placeholder="year" id="yearInput" onkeyup="onInputChange(event)" >
<input type="text" placeholder="make" id="makeInput" onkeyup="onInputChange(event)">
<input type="text" placeholder="model" id="modelInput" onkeyup="onInputChange(event)"> 
<button disabled="disabled" onclick="someAction" type="button" id="addCarButton">Add Car</button>

JavaScript

function onInputChange(event) {
    let stateButton = $("#yearInput").val().length() > 0;
    stateButton = stateButton && $("#makeInput").val().length() > 0;
    stateButton = stateButton && $("#modelInput").val().length() > 0;

    const btn = $('#addCarButton');

    stateButton = !stateButton ? btn.attr("disabled", "disabled") :  btn.removeAttr("disabled");        
}

禁用按钮单击，直到所有输入字段中都包含文本（javascript和jquery）

5 个答案: