как поменять фон кнопки? он не меняется при валидации

введите сюда описание изображения

function checkParams() {
  var width = $('.input_first').val();
  var height = $('.input_second').val();
  var button = document.querySelector('.button');

  if (width.length != 0 && height.length != 0) {
    $('.next').removeAttr('disabled');
    button.style.background = 'url(/)'

  } else {
    $('submit').attr('disabled', 'disabled');
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input required type="text" name="text" placeholder="0" class="input_first" onkeyup="checkParams()">
<input onkeyup="checkParams()" required type="text" name="text2" placeholder="0" class="input_second">
<div class="button_cor">
  <input disabled="disabled" type="submit" name="Next" value="ДАЛЕЕ" class="next">
</div>

Путь к картинкам через CSS такой background:url("../images/png/next_disabled.png");


Ответы (1 шт):

Автор решения: Igor

function checkParams() {
  var width = $('.input_first').val();
  var height = $('.input_second').val();

  if (width.length != 0 && height.length != 0) {
    $('.next').removeAttr('disabled');
    $('.next').css({ 'background-image': 'url("https://homepages.cae.wisc.edu/~ece533/images/baboon.png")' });
  } else {
    $('.next').attr('disabled', 'disabled');
    $('.next').css({ 'background-image': '' });
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input required type="text" name="text" placeholder="0" class="input_first" onkeyup="checkParams()">
<input onkeyup="checkParams()" required type="text" name="text2" placeholder="0" class="input_second">
<div class="button_cor">
  <input disabled="disabled" type="submit" name="Next" value="ДАЛЕЕ" class="next" style="width:400px;height:200px;" onclick="console.log('test')">
</div>

→ Ссылка