堆棧內存溢出
  簡體   English   中英

禁用按鈕單擊，直到所有輸入字段中都包含文本（javascript和jquery）

[英]Disable button click until all input fields have text in them (javascript & jquery)

 原文  2018-08-21 19:06:47  9   5    javascript/ jquery/ html

問題描述

我剛剛開始。 我知道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個輸入，但是我想要它，以便僅在每個輸入中都有內容時才啟用按鈕。

當我只運行我在這里擁有的內容時，無論如何，該按鈕都將被禁用。 我玩了一下，如果某些隨機條件成立，則可以啟用它。

我也覺得我需要有一種方法可以多次運行條件檢查，但是我不確定如何執行。

5 個解決方案

解決方案1
 1  2018-08-21 19:13:34

向javascript添加了注釋，以顯示input事件如何處理按鈕的禁用/啟用。 我還在與按鈕相關的輸入上放置了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>

解決方案2
 1  2018-08-21 19:26:58

您可以循環通過量在所有輸入keyup並打開一個“標志”，以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>

解決方案3
 0  2018-08-21 19:11:36

您走在正確的軌道上； 您的條件可以簡單地檢查所有3個輸入： 

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

解決方案4
 0 已采納  2018-08-21 19:26:18

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

解決方案5
 0  2018-08-21 19:33:18

您可以在javascript文件中聲明一個onInputChange方法，該方法將event變量作為輸入（這樣，由於具有ID，因此您知道事件的來源），之后要做的就是使onInputChange方法更改按鈕的狀態取決於可以進行任何輸入之后的輸入狀態。

  1. 的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>

  2. 的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"); }

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 禁用jQuery的提交按鈕，直到所有字段都具有值（輸入，單選，選擇，復選框） Javascript 禁用按鈕，直到 3 個或更多輸入字段具有值 Javascript禁用按鈕，直到所有字段都填滿 禁用jQuery中的按鈕，直到所有必填字段都具有值（尤其是select值） 禁用表單提交按鈕，直到填充所有輸入/文本區域字段，而不使用 for 循環（無 jQuery） 如何禁用按鈕，直到僅使用 JavaScript 填充所有輸入字段？ Javascript：如何在所有字段都經過驗證之前禁用提交按鈕？ 禁用提交按鈕，直到填寫輸入字段 禁用按鈕，直到完成所有必填字段 禁用提交按鈕，直到完成所有字段
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM