https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
-moz-device-pixel -ratio Дает количество пикселей устройства на пиксель CSS.
blockquote>это почти самоочевидно. число описывает отношение количества «реальных» пикселей (физических пикселов экрана) для отображения одного «виртуального» пикселя (размер устанавливается в CSS).
Два поля и два события ...
Вы можете написать один «обработчик» для этого. Просто используйте метод .on()
, который позволяет связывать много событий (здесь keyup
и change
). Затем, в сравнении, проверьте оба значения. Если один или другой пуст, отключите кнопку.
$(function() {
$('#searchInput, #selectBox').on('keyup change',function() {
if ($('#searchInput').val() == '' || $('#selectBox').val() == '') {
$('.enableOnInput').prop('disabled', true);
} else {
$('.enableOnInput').prop('disabled', false);
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id='frame'>
<div class='search'>
<form method='post'>
<select id="selectBox" class="selectBox" required>
<option value="">--Select--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<input type='text' name='searchQuery' id='searchInput' required/>
<input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
</form>
</div>
</div>
</body>
Это можно даже записать короче, поместив условие непосредственно во второй истинный / ложный аргумент .prop()
:
$(function() {
$('#searchInput, #selectBox').on('keyup change',function() {
$('.enableOnInput').prop('disabled', ($('#searchInput').val() == '' || $('#selectBox').val() == ''));
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id='frame'>
<div class='search'>
<form method='post'>
<select id="selectBox" class="selectBox" required>
<option value="">--Select--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<input type='text' name='searchQuery' id='searchInput' required/>
<input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
</form>
</div>
</div>
</body>
Вы можете сделать это, создав новую функцию, которая активирует кнопку отправки и будет вызываться всякий раз, когда изменяется поле ввода текста или изменяется поле выбора
$('#selectBox','#searchInput').on('change', function() {
enablingFunction();
});
function enablingFunction(){
if($('#selectBox').val() != "" && $('#searchInput').val() != ""){
$('#submitBtn').prop("disabled", false);
}
}