Я бы использовал input
и change
на form
, а не keyup
на полях, поскольку, конечно, вы можете выбирать вещи с помощью мыши. Я бы также использовал prop
, а не attr
, чтобы установить disabled
:
$(document).ready(function() {
$('form').on("input change", function() {
var hasValue = $('#username,#password,#position').filter((index, input, select) => input.value.length > 0).length;
$('.actions input').prop('disabled', !hasValue);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
<form>
<div class='field'>
<label for="username">Username</label>
<input id="username" type="text" />
</div>
<div class='field'>
<label for="password">Password</label>
<input id="password" type="password" />
</div>
<div class='field'>
<select id="position">
<option value="">position</option>
<option value="1">first</option>
<option value="2">second</option>
<option value="3">third</option>
</select>
</div>
<div class='actions'>
<input type="submit" value="Login" disabled="disabled" />
</div>
</form>
</div>
Отдельно я думаю, что, вероятно, я бы использовал более общий селектор при выборе полей для проверки, и остановил бы проверку, как только узнаю, что мне нужно включить форму:
$(document).ready(function() {
$('form').on("input change", function() {
var hasValue = false;
$(this).find("input[type=text], input[type=password], select").each(function() {
if (this.value) {
hasValue = true;
return false;
}
});
$(this).find('.actions input').prop('disabled', !hasValue);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
<form>
<div class='field'>
<label for="username">Username</label>
<input id="username" type="text" />
</div>
<div class='field'>
<label for="password">Password</label>
<input id="password" type="password" />
</div>
<div class='field'>
<select id="position">
<option value="">position</option>
<option value="1">first</option>
<option value="2">second</option>
<option value="3">third</option>
</select>
</div>
<div class='actions'>
<input type="submit" value="Login" disabled="disabled" />
</div>
</form>
</div>