¿Cómo habilito el botón si selecciono 2 de mis dos opciones de selección separadas?
{{-- 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>Necesito seleccionar 1 de cada opción de selección para habilitar el botón, por favor ayuda y el botón debe estar deshabilitado si solo se selecciona 1 de la opción de selección y deben ser ambos para habilitar
Debe obtener el evento de cambio de su selección y luego verificar si están vacíos o no.
$('.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>su código está perfectamente bien, excepto por algunos problemas menores. En primer lugar, en estas dos líneas, elimine el espacio después de ambos id
var level = document.getElementById('level ') var savebtn = document.getElementById('savebtn ')Y en la línea que está verificando si alguno está vacío, debería ser una declaración 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; } Habiendo dicho todo eso, así es como reescribiría la función 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; } }