Pregunta:

Fecha: 13-12-2017 17:13:23 (En Español)

Ayuda. Cómo habilitar(disabled=false) o desabilitar(disabled=true) select cuando se eligen opciones de otros selects?[No resuelta]

Hola comunidad phpcentral, tengo un pequeño proyecto en Materializecss. Estoy diseñando un formulario donde tengo varios campos selects, unos multiples y otros simples. Necesito hacer algunas validaciones son JavaScript/ JQuery para esos campos selects. Veran, tengo el siguiente codigo:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
   </head>
  <body>
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready (function() {
$('select').select();
    });
</script>
<br>
<ul>
   <!-- PRIMER li -->
    <li class="list">
    <span class="select1"></span><span class="select2"></span>
    <br>
      <br>
      <div class="row">
          <div>
            <select class="and-or" id="And_OrEcu" disabled>
                <option value="4">Y</option>
                <option value="5">O</option>
              </select>
          </div>
      </div>
       <br>
        <div class="row">
          <div class="colores">
            <select id="ecuaId" multiple="multiple" class="sunMultiple">
              <option value="0" selected>Ninguno</option>
              <option value="1">Amarillo</option>
              <option value="2">Azul</option>
              <option value="3">Rojo</option>

            </select>
              
            </div>
          </div>
    </li>
<br>
      <br>
    <!-- SEGUNDO li -->

    <li class="list">
    <span class="select3"></span><span class="select4"></span>
      <br>
      <br>
      <div class="row">
          <div>
            <select class="and-or" id="And_OrMx" disabled>
                <option value="4">And</option>
                <option value="5">Or</option>
              </select>
          </div>
      </div>
       <br>
        <div class="row">
          <div class="colores">
            <select id="mexId" multiple="multiple" class="sunMultiple">
              <option value="0" selected>Ninguno</option>
              <option value="1">Verde</option>
              <option value="2">Blanco</option>
              <option value="3">Rojo</option>

            </select>
              
            </div>
          </div>
    </li>
  </ul>

.list {
border: 2px solid yellow;
}

var ninguno = true;
function displayValues () {
  var select1Values = $("#ecuaId").val() || []; //capturar values
  var select1Texts = $("#ecuaId option:selected").map(function() {
                  return $(this).text();
                                }).get();

  // si la opción Ninguno esta seleccionado pero se selecciona algo diferente
  if (ninguno && (select1Values.length > 1 || select1Values[0] != "0")) {
    //hacer que la opcion Ninguno ya no este seleccionada 
    $("#ecuaId option[value=0]").removeAttr("selected");
    
    // actualizar nuevos valores 
    select1Values = $("#ecuaId").val()
    //actualizar texto
    
    select1Texts = $("#ecuaId option:selected").map(function() {
                  return $(this).text();
                                }).get(); 
        ninguno = false;

    //si ninguno no esta seleccionado y se selecciona
  } else if (!ninguno && select1Values.indexOf("0") > -1) {
    // Colocar Ninguno como unica opción 
    $("#ecuaId").val("0");
    // actualizar valores
    select1Values = $("#ecuaId").val()
    //actualizar texto
    select1Texts = $("#ecuaId option:selected").map(function() {
                  return $(this).text();
                                }).get();
    ninguno = true;
  }

  document.querySelector('.select1').innerHTML = select1Texts.join(", ");
  $('.select1').html(select1Texts.join(", "));
  
}
//User Changes. 
$("#ecuaId").change(displayValues);
displayValues();

var ninguno2 = true;
function displayValues2 () {
  var select2Values = $("#mexId").val() || []; //capturar values
  var select2Texts = $("#mexId option:selected").map(function() {
                  return $(this).text();
                                }).get();

  // si la opción Ninguno esta seleccionado pero se selecciona algo diferente
  if (ninguno2 && (select2Values.length > 1 || select2Values[0] != "0")) {
    //hacer que la opcion Ninguno ya no este seleccionada 
    $("#mexId option[value=0]").removeAttr("selected");
    
    // actualizar nuevos valores 
    select2Values = $("#mexId").val()
    //actualizar texto
    
    select2Texts = $("#mexId option:selected").map(function() {
                  return $(this).text();
                                }).get(); 
        ninguno2 = false;

    //si ninguno no esta seleccionado y se selecciona
  } else if (!ninguno2 && select2Values.indexOf("0") > -1) {
    // Colocar Ninguno como unica opción 
    $("#mexId").val("0");
    // actualizar valores
    select2Values = $("#mexId").val()
    //actualizar texto
    select2Texts = $("#mexId option:selected").map(function() {
                  return $(this).text();
                                }).get();
    ninguno2 = true;
  }

  document.querySelector('.select3').innerHTML = select2Texts.join(", ");
  $('.select3').html(select2Texts.join(", "));
  
}
//User Changes. 
$("#mexId").change(displayValues2);
displayValues2();

Con el codigo javascript anterior obtengo el texto(no el value) de cada opción seleccionada de los selects multiples y muestro dichos textos en elementos span. Hay un par de elementos select simples, que tienen dos opciones: and, or; estos selects simples tienen atributo disabled, estan desabilitados inicialmente. Lo que quisiera hacer (pero no se muy bien cómo), es quitarle el atributo "disabled" a ambos select simples con Javascript, pero, necesito que eso suceda solo cuando el usuario seleccione opciones diferentes a "Ninguno", en los dos selects multiples.
Es decir, si un usuario va al primer select multiple (el que tiene id=ecuaId) y selecciona una o más opciones que sean diferentes a la opción "Ninguno", pero no elige alguna opción del segundo select multiple (el que tiene id=mexId) entonces el atributo disabled de los select simples no debe ser removido. La idea es que si el usuario a seleccionado opciones diferentes a "Ninguno" en ambos selects multiples, entonces se remueva el atributo disabled de los selects simples.
No se si me di a entender bien.
cómo podria lograr esto? Necesito validar mi formulario de esa forma, porque si solo voy a usar un solo select multiple, no se puede habilitar los select simples.
Alguien que me pueda aportar algo o ayudarme ??
Espero haberme explicado bien... :(
Estoy usando Materializecss como framework para el diseño del formulario. Etiquetas: Aporte - CSS - CSS3 - Formulario - Framework - HTML - HTML5 - Javascript - JQuery - PHP - Pregunta - Sugerencia - Web Votos: 0 - Respuestas: 1 - Vistas: 14 Compartir en: Google Facebook Twitter LinkedIn Link

Respuestas:

Dyan Cancho Karma: 127

Fecha: 14-12-2017 12:49:45 Hola te recomendaria que crees una función , pero como dices andas usando es framework puedes agregara las siguientes funciones a tu codigo JS.

 $(document).ready(function(){
        
        $('#ecuaId').click(function(){
            
            var valor1 = $('#ecuaId').val();
            var valor2 = $('#mexId').val();
            
           if(valor1 == 0 & valor2 == 0 ){
               
              // alert("Habilitados");
               $('#And_OrEcu').removeAttr("disabled");
               $('#And_OrMx').removeAttr("disabled")
            
            }else if(valor1 !== 0 & valor2 !== 0 ){
                
           // alert("Deshabilitados");   
            $('#And_OrEcu').attr("disabled","true");
            $('#And_OrMx').attr("disabled","true");
             
             
           }
           
        });
        
        
        $('#mexId').click(function(){
            
            var valor1 = $('#ecuaId').val();
            var valor2 = $('#mexId').val();
            
           if(valor1 == 0 & valor2 == 0 ){
               
                // alert("Habilitados");
               $('#And_OrEcu').removeAttr("disabled");
               $('#And_OrMx').removeAttr("disabled")
            
            }else if(valor1 !== 0 & valor2 !== 0 ){
                
           // alert("Deshabilitados");   
            $('#And_OrEcu').attr("disabled","true");
            $('#And_OrMx').attr("disabled","true");
             
             
           }
            
           
            
        });
        
        
        
    });

Tu codigo completo quedaria algo así:

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
       <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready (function() {
$('select').select();
    });
</script>
<br>
<ul>
   <!-- PRIMER li -->
    <li class="list">
    <span class="select1"></span><span class="select2"></span>
    <br>
      <br>
      <div class="row">
          <div>
            <select class="and-or" id="And_OrEcu" disabled>
                <option value="4">Y</option>
                <option value="5">O</option>
              </select>
          </div>
      </div>
       <br>
        <div class="row">
          <div class="colores">
            <select id="ecuaId" multiple="multiple" class="sunMultiple">
              <option value="0" selected>Ninguno</option>
              <option value="1">Amarillo</option>
              <option value="2">Azul</option>
              <option value="3">Rojo</option>
            </select>
              
            </div>
          </div>
    </li>
<br>
      <br>
    <!-- SEGUNDO li -->
    <li class="list">
    <span class="select3"></span><span class="select4"></span>
      <br>
      <br>
      <div class="row">
          <div>
            <select class="and-or" id="And_OrMx" disabled>
                <option value="4">And</option>
                <option value="5">Or</option>
              </select>
          </div>
      </div>
       <br>
        <div class="row">
          <div class="colores">
            <select id="mexId" multiple="multiple" class="sunMultiple">
              <option value="0" selected>Ninguno</option>
              <option value="1">Verde</option>
              <option value="2">Blanco</option>
              <option value="3">Rojo</option>
            </select>
              
            </div>
          </div>
    </li>
  </ul>

<script>
    
    $(document).ready(function(){
        
        $('#ecuaId').click(function(){
            
            var valor1 = $('#ecuaId').val();
            var valor2 = $('#mexId').val();
            
           if(valor1 == 0 & valor2 == 0 ){
               
              // alert("Habilitados");
               $('#And_OrEcu').removeAttr("disabled");
               $('#And_OrMx').removeAttr("disabled")
            
            }else if(valor1 !== 0 & valor2 !== 0 ){
                
           // alert("Deshabilitados");   
            $('#And_OrEcu').attr("disabled","true");
            $('#And_OrMx').attr("disabled","true");
             
             
           }
           
        });
        
        
        $('#mexId').click(function(){
            
            var valor1 = $('#ecuaId').val();
            var valor2 = $('#mexId').val();
            
           if(valor1 == 0 & valor2 == 0 ){
               
                // alert("Habilitados");
               $('#And_OrEcu').removeAttr("disabled");
               $('#And_OrMx').removeAttr("disabled")
            
            }else if(valor1 !== 0 & valor2 !== 0 ){
                
           // alert("Deshabilitados");   
            $('#And_OrEcu').attr("disabled","true");
            $('#And_OrMx').attr("disabled","true");
             
             
           }
            
           
            
        });
        
        
        
    });
    
    
    
var ninguno = true;
function displayValues () {
  var select1Values = $("#ecuaId").val() || []; //capturar values
  var select1Texts = $("#ecuaId option:selected").map(function() {
                  return $(this).text();
                                }).get();
  // si la opción Ninguno esta seleccionado pero se selecciona algo diferente
  if (ninguno && (select1Values.length > 1 || select1Values[0] != "0")) {
    //hacer que la opcion Ninguno ya no este seleccionada 
    $("#ecuaId option[value=0]").removeAttr("selected");
    
    // actualizar nuevos valores 
    select1Values = $("#ecuaId").val()
    //actualizar texto
    
    select1Texts = $("#ecuaId option:selected").map(function() {
                  return $(this).text();
                                }).get(); 
        ninguno = false;
    //si ninguno no esta seleccionado y se selecciona
  } else if (!ninguno && select1Values.indexOf("0") > -1) {
    // Colocar Ninguno como unica opción 
    $("#ecuaId").val("0");
    // actualizar valores
    select1Values = $("#ecuaId").val()
    //actualizar texto
    select1Texts = $("#ecuaId option:selected").map(function() {
                  return $(this).text();
                                }).get();
    ninguno = true;
  }
  document.querySelector('.select1').innerHTML = select1Texts.join(", ");
  $('.select1').html(select1Texts.join(", "));
  
}



//User Changes. 
$("#ecuaId").change(displayValues);

displayValues();
var ninguno2 = true;
function displayValues2 () {
  var select2Values = $("#mexId").val() || []; //capturar values
  var select2Texts = $("#mexId option:selected").map(function() {
                  return $(this).text();
                                }).get();
  // si la opción Ninguno esta seleccionado pero se selecciona algo diferente
  if (ninguno2 && (select2Values.length > 1 || select2Values[0] != "0")) {
    //hacer que la opcion Ninguno ya no este seleccionada 
    $("#mexId option[value=0]").removeAttr("selected");
    
    // actualizar nuevos valores 
    select2Values = $("#mexId").val()
    //actualizar texto
    
    select2Texts = $("#mexId option:selected").map(function() {
                  return $(this).text();
                                }).get(); 
        ninguno2 = false;
    //si ninguno no esta seleccionado y se selecciona
  } else if (!ninguno2 && select2Values.indexOf("0") > -1) {
    // Colocar Ninguno como unica opción 
    $("#mexId").val("0");
    // actualizar valores
    select2Values = $("#mexId").val()
    //actualizar texto
    select2Texts = $("#mexId option:selected").map(function() {
                  return $(this).text();
                                }).get();
    ninguno2 = true;
  }
  document.querySelector('.select3').innerHTML = select2Texts.join(", ");
  $('.select3').html(select2Texts.join(", "));
  
}
//User Changes. 
$("#mexId").change(displayValues2);
displayValues2();





</script>
    </body>
</html>

Votos: 0 - Link respuesta

Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión

frjcbbae garagebible.com

Pregunta:

Ayuda. Cómo habilitar(disabled=false) o desabilitar(disabled=true) select cuando se eligen opciones de otros selects?[No resuelta]

Respuestas:

secciones

La comunidad

Mi Cuenta