如果两个选择选项具有值，则 JavaScript 启用按钮答案

【问题标题】：JavaScript enable button if the two select option has value如果两个选择选项具有值，则 JavaScript 启用按钮
【发布时间】：2022-01-16 18:00:19
【问题描述】：

如果我从两个单独的选择选项中选择 2，如何启用按钮？

{{-- 1st Select Option --}}

<label class="up-label">Language</label>
<select id="language" class="language" name="language" onchange="changebutton()">
  <option value="" selected disabled>language</option>
  @foreach( $languages as $language )
  <option value="{{ $language->id }}">{{ $language->language }}</option>
  @endforeach
</select>

{{-- 2nd Select Option --}}

<label class="up-label">Level</label>
<select id="level" class="level" name="level" onchange="changebutton()">
  <option value="" selected disabled>Levels</option>
  @foreach( $levels as $level)
  <option value="{{ $level->id }}">{{ $level->level}}</option>
  @endforeach
</select>

{{-- Button --}}

<button type="submit" class="btn btn-primary" id="savebtn" disabled>Save</button>

<script>
   function changebutton(){
     var language = document.getElementById('language')
     var level = document.getElementById('level ')
     var savebtn = document.getElementById('savebtn ')
     if(language.value == '' && level .value == '')
     {
       savebtn.disabled = true;
     }
     else
     {
       savebtn.disabled = false;
     }
  }
</script>

我需要从每个选择选项中选择 1 来启用按钮

【问题讨论】：

您当前的代码有什么具体问题？你忘了提。

标签： javascript php jquery laravel

【解决方案1】：

您需要从您的选择中获取更改事件，然后检查它们是否为空。

https://api.jquery.com/on/

https://api.jquery.com/prop/

$('.select1').on('change', function() {
  checkSelects($(this).val(), $(".select2").val());
});

$('.select2').on('change', function() {
  checkSelects($(this).val(), $(".select1").val());
});

function checkSelects(select1, select2) {
  let buttonProp = select1 != "" && select2 != "" ? false : true;
  $('button').prop('disabled', buttonProp);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Select 1
<select class="select1">
  <option></option>
  <option value="test">Test</option>
</select>
<br><br>
Select 2
<select class="select2">
  <option></option>
  <option value="test">Test</option>
</select>
<br><br><button disabled="disabled">Button</button>

【讨论】：

【解决方案2】：

除了一些小问题外，您的代码非常好。首先这两行，去掉两个id后面的空格

var level = document.getElementById('level ')
var savebtn = document.getElementById('savebtn ')

在您检查其中一个是否为空的那一行上，应该是一个 OR 语句

 if(language.value == '' && level .value == ''){
     //Since you're using an "AND" (&&) statement, 
     //it is evaluating to true on when both selects 
     //have an empty value. If either one has any 
     //value, the statement is returning to false, and 
     //`savebtn.disabled = true;` part is not getting executed
     savebtn.disabled = true;
 }

说了这么多，下面是我重写changebutton函数的方法

   function changebutton(){
     var language = document.getElementById('language')
     var level = document.getElementById('level') //Removed additional space after level
     var savebtn = document.getElementById('savebtn') //Removed additional space after savebtn
     if(language.value == '' || level.value == '') //Changed AND (&&) operator to OR (||) operator 
     {
       //gets executed if language or level has empty value
       savebtn.disabled = true;
     }
     else
     {
       savebtn.disabled = false;
     }
  }

【讨论】：