Pregunta:
Fecha: 28-05-2017 19:07:46
(En Español)
En esta ocasión los molesto para hacer la siguiente consulta.
El codigo que expondré más adelante presenta algo como lo siguiente.
Utilizo:
- Bootsrap 3.3.7
- Jquery 3.2.1
- Plugin bootstrap-select 1.12.2
Con Jquery quiero evaluar que opción se seleccionó y depende de dicha opción agregar disabled en otras opciones. ejemplo <option disabled>La opción</option> y quitar disabled a las otras opciones si se volvio a seleccionar.
En otras palabras, las condiciones para disabled en las opciones son:
1 - Si se selecciona "TODOS" dándolo como selecionado, poner en disabled todas las otras opciones. Si se vuelve a a clickear "TODOS" esta vez dándolo como deseleccionado esta opción quitar disabled a todas las otras opciones, dejándola disponible para seleccionar.
2 - Si se selecciona cualquier opción que sea "Pendiente", Terminado", "Guardia" la opción "TODOS" tiene que estar disabled. En caso que las tres opciones mencionadas anteriormente ninguna este selecionada la opcion "TODOS" no debe de tener disabled
3 - Si se selecciona "Pendiente" las siguientes opciones deben estar en disabled "TODOS" y "Terminado", si "Pendiente" vuelve a estar deseleccionado" no deben tener disabled las opciones anteriores.
4 - Si se selecciona "Terminado" las siguientes opciones deben estar en disabled "TODOS" y "Pendiente", si "Terminado" vuelve a estar deseleccionado" no deben tener disabled las opciones anteriores.
Es decir:
si se elige "TODOS" no se puede elegir ninguna de las otras opciones a menos que cambie su estado.
si se elige "Pendiente" no se puede elegir Terminado ni "TODOS" a menos que cambie su estado.
si se elige "Terminado" no se puede elegir Pendiente ni "TODOS" a menos que cambie su estado.
La opción "Guardia" será solamente disabled cuando esté seleccionado "TODOS".
El codigo lo altere colocandoles los CDNs de los script involucrado a fin que los puedan probar en sus PCs sin problemas.
He hecho algunas pruebas pero no me estoy dando cuenta de como hacerlo por las diferentes condicionales.
Desde ya muchas gracias.
Que tengan un buen dia.
Saludos
Votos: 2 - Respuestas: 13 - Vistas: 20 Compartir en: Google Facebook Twitter LinkedIn Link
Con JQuery: ¿Cómo agregar y quitar 'disabled' en las etiquetas 'option' de un 'select' según lo seleccionado?[Resuelta]
HolaEn esta ocasión los molesto para hacer la siguiente consulta.
El codigo que expondré más adelante presenta algo como lo siguiente.
Utilizo:
- Bootsrap 3.3.7
- Jquery 3.2.1
- Plugin bootstrap-select 1.12.2
Con Jquery quiero evaluar que opción se seleccionó y depende de dicha opción agregar disabled en otras opciones. ejemplo <option disabled>La opción</option> y quitar disabled a las otras opciones si se volvio a seleccionar.
En otras palabras, las condiciones para disabled en las opciones son:
1 - Si se selecciona "TODOS" dándolo como selecionado, poner en disabled todas las otras opciones. Si se vuelve a a clickear "TODOS" esta vez dándolo como deseleccionado esta opción quitar disabled a todas las otras opciones, dejándola disponible para seleccionar.
2 - Si se selecciona cualquier opción que sea "Pendiente", Terminado", "Guardia" la opción "TODOS" tiene que estar disabled. En caso que las tres opciones mencionadas anteriormente ninguna este selecionada la opcion "TODOS" no debe de tener disabled
3 - Si se selecciona "Pendiente" las siguientes opciones deben estar en disabled "TODOS" y "Terminado", si "Pendiente" vuelve a estar deseleccionado" no deben tener disabled las opciones anteriores.
4 - Si se selecciona "Terminado" las siguientes opciones deben estar en disabled "TODOS" y "Pendiente", si "Terminado" vuelve a estar deseleccionado" no deben tener disabled las opciones anteriores.
Es decir:
si se elige "TODOS" no se puede elegir ninguna de las otras opciones a menos que cambie su estado.
si se elige "Pendiente" no se puede elegir Terminado ni "TODOS" a menos que cambie su estado.
si se elige "Terminado" no se puede elegir Pendiente ni "TODOS" a menos que cambie su estado.
La opción "Guardia" será solamente disabled cuando esté seleccionado "TODOS".
El codigo lo altere colocandoles los CDNs de los script involucrado a fin que los puedan probar en sus PCs sin problemas.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Prueba</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- SELECT -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<style>
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#opciones").change(function(){
alert($(this).val())
});
});
</script>
</head>
<body>
<div class="panel panel-primary">
<div class="panel-heading"><h1 class="text-center">Seleccion</h1></div>
<div class="panel-body">
<div class="row"> </div><!-- row una fila en blanco para dar un espaciado arriba -->
<div class="container-fluid">
<form action="post.php" method="post">
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="col-md-3 col-centered">
<label class="control-label " for="opciones">Estados:</label>
<select id="opciones" name="opciones[]" class="selectpicker" data-style="btn-info" multiple title="Sin estados" data-header="Estados solo:">
<option data-subtext="Todos los servicios" data-icon="glyphicon-asterisk" value="TODOS" selected>TODOS</option>
<option data-subtext="Solo servicios pendientes" value="Pendiente">Pendiente</option>
<option data-subtext="Solo servicios terminados" value="Terminado">Terminado</option>
<option data-subtext="Solo servicios realizados en la guardia" value="Guardia">Guardia</option>
</select>
</div>
<div class="row row-centered">
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Buscar</button>
</div>
</form>
</div>
<div class="row"> </div><!-- row una fila en blanco para dar un espaciado arriba -->
<div class="row"> </div><!-- row una fila en blanco para dar un espaciado arriba -->
<div class="panel-footer text-center text-primary">Test</div>
</div></div>
</body>
</html>
He hecho algunas pruebas pero no me estoy dando cuenta de como hacerlo por las diferentes condicionales.
Desde ya muchas gracias.
Que tengan un buen dia.
Saludos
Votos: 2 - Respuestas: 13 - Vistas: 20 Compartir en: Google Facebook Twitter LinkedIn Link
Respuestas:
-
Fecha: 29-05-2017 14:41:51 ok pero el asunto es que si la opcion esta disabled no la puedes seleccionar de nuevo, por ejemplo Todos, pasa a disabled todas las opciones, luego que?????
yo que tu utilizaria checkboxes Votos: 1 - Link respuesta -
Fecha: 30-05-2017 02:15:25 Hola Carlos gracias por tu interés ;)
Sigo batallando con el codigo.
En principio por el diseño debo utilizar select y no checbox
Por ejemplo en un caso: si selecciono la opción TODOS este quedaría en select y el resto de las opciones en disabled, si vuelvo a seleccionar la opción TODOS esta opción ya no estaría con select y el resto de la opciones se le quitaria el disabled.
Debería ser algo como el siguiente gif.
Sería como encender y apagar al seleccionar.
De ultima puedo eliminar la opción TODOS para serlo más fácil
Que tengas un buen día
Saludos Votos: 1 - Link respuesta -
Fecha: 30-05-2017 03:15:27 Tienes que tomas en consideracion algo que pasar por alto, y es que esas librerias no manejan los elementos cono tal y son, es decir, que todo lo reescriben, por ejemplo i tratas de manipular un option usando la libreria de bootstrap-select esto te saldra mal, porque esa libreria reemplaza los elementos con etiquetas html, por ejemplo, li, a entre otros.
Dicho esto te muestro un ejemplo de como capturar el clic en una opcion con esta libreria:
$(document).ready(function () { $('#opciones').on('changed.bs.select', function (event, clickedIndex, newValue, oldValue) { var index = clickedIndex;//Inde xdel Elemento var estado = newValue;//Nuevo Estado (seleccionado = true o desseleccionado = false) //Validamos si se clikeo TODOS y si su estado es true if(index===0 && estado){ //De ser positivo recorremos las li y verificamos que su index no sea igual a la seleccionada $("li").each(function(){ if($(this).attr('data-original-index')!=0){ //Ocultamos la li de la vista $(this).css('display','none'); console.warn($(this).attr('data-original-index')); } }) }else{ //En caso de desseleccionar la opcion de TODOS muestro el resto de las opciones $("li").each(function(){ if($(this).attr('data-original-index')!=0){ $(this).css('display','block'); console.warn($(this).attr('data-original-index')); } }) } }); });
Este ejemplo lo que hace es verificar si el index de TODOS que es cero por ser el primero fue seleccionado lo cual lo para a true y recorro las li buscando la propiedad index, verificando que no sea igual a la seleciconada y las oculto, en caso de hacer clic de nuevo en la opcion TODOS realizo el mismo recorrido pero esta vez para volver a mostrarlas.
Aca esta la secuencia completa que muestra u oculta las opciones de acuerdo a la tabla que indicaste más arriba:
$(document).ready(function () { $('#opciones').on('changed.bs.select', function (event, clickedIndex, newValue, oldValue) { var index = clickedIndex;//Inde xdel Elemento var estado = newValue;//Nuevo Estado (seleccionado = true o desseleccionado = false) //Validamos si se clikeo TODOS y si su estado es true if(index===0 && estado){ //De ser positivo recorremos las li y verificamos que su index no sea igual a la seleccionada $("li").each(function(){ if($(this).attr('data-original-index')!=0){ //Ocultamos la li de la vista $(this).css('display','none'); console.warn($(this).attr('data-original-index')); } }) }else if(index===0 && !estado){ //En caso de desseleccionar la opcion de TODOS muestro el resto de las opciones $("li").each(function(){ if($(this).attr('data-original-index')!=0){ $(this).css('display','block'); console.warn($(this).attr('data-original-index')); } }) }else if(index===1 && estado){ $("li").each(function(){ if($(this).attr('data-original-index')==0 || $(this).attr('data-original-index')==2 ){ //Ocultamos la li de la vista $(this).css('display','none'); console.warn($(this).attr('data-original-index')); } }) }else if(index===1 && !estado){ $("li").each(function(){ if($(this).attr('data-original-index')==0 || $(this).attr('data-original-index')==2 ){ //Ocultamos la li de la vista $(this).css('display','block'); console.warn($(this).attr('data-original-index')); } }) }else if(index===2 && estado){ $("li").each(function(){ if($(this).attr('data-original-index')==0 || $(this).attr('data-original-index')==1 ){ //Ocultamos la li de la vista $(this).css('display','none'); console.warn($(this).attr('data-original-index')); } }) }else if(index===2 && !estado){ $("li").each(function(){ if($(this).attr('data-original-index')==0 || $(this).attr('data-original-index')==1 ){ //Ocultamos la li de la vista $(this).css('display','block'); console.warn($(this).attr('data-original-index')); } }) } }); });
Espero te sea de utilidad la respuesta. Saludos. Votos: 3 - Link respuesta -
Fecha: 30-05-2017 16:30:21 Carlos
Tu explicación es muy buena y el ejemplo con el codigo ayuda! la cual agradezco mucho
Mis conocimientos sobre javascript son muy elementales, he visto lo básico para entrarme en Jquery ya que est librería me es mas facil de asimilar además de que me permite realizar pequeñas app de manera rápida. Lo estoy viendo de apoco para no marearme.
Sobre lo que me has comentado, entendi que la librería que he utilizado bootstrap-select atera el DOM, reemplaza todos los componentes de formulario del tipo select, option, etc por etiquetas de HTML tales como una lista desordenada y CSS. De esta manera jamás yo podría manipular un select un options ya que no existía ya que ha sido eliminado por bootstrap-select y en su lugar inserta elementos de lista con css.
Entonces no es posible colocar con jquery disabled en las opciones, tal
<option disabled="disabled" data-subtext="Todos los servicios" data-icon="glyphicon-asterisk" value="TODOS">TODOS</option>
ya que no existe tal codigo porque ha sido reemplazado por bootstrap-select.
Naturalmente con mis escaso conocimientos en este tema, no hubiese logrado resolver por mis propios medios.
Algo que he notado es que si elijo primero Guardia y luego TODOS queda tambien seleccionado TODOS y Guardia. En el caso que se seleccione TODOS el resto de las opciones tienen que estar deseleccionadas.
¿Qué habría que alterar en el codigo para que cuando carge la pagina esté seleccionada la opción TODOS por defecto? Esto me quedaría por resolver.
Disculpa por mi molestia no es mi intención de abusar de tu gentileza.
Sigo viendo minuciosamente tu codigo con el fin de entenderlo y aprender sobre la manipulación de los elementos.
Que tengas un muy buen dia.
Saludos Votos: 1 - Link respuesta -
Fecha: 31-05-2017 02:09:03 Bueno ya de entrada si le pones el
option
elselected
una vez cargada la pagina y reconocida la clase el plugin muestra como seleccionada por defecto la opción TODOS Votos: 1 - Link respuesta -
Fecha: 31-05-2017 11:45:34 Carlos Muchas gracias por responder
Había probado lo siguiente en el codigo:
<option data-subtext="Todos los servicios" data-icon="glyphicon-asterisk" value="TODOS" selected>TODOS</option>
y al cargar la pagina sale
Como se muestra, las opciones que le siguen a TODOS son visibles
Pareciera que faltaria que el codigo de Jquery cheque las opciones segun se puede apreciar con firefug
Estoy revisando y haciendo pruebas
Que tengas un buen dia
Saludos Votos: 1 - Link respuesta -
Fecha: 04-06-2017 08:47:17 Hola Walter:
He estado siguiendo la pregunta y probando diferentes soluciones.
A partir de tus enlaces de cabecera, ninguna de las soluciones desde un "simple" JQuery" ofrecían solución.
La que te propongo, no es perfecta, pero se reduce a HTML sin necesidad de javascript:
1.- Elimina tu código Javascript
2.- Cambia todo tu select por este código:
<select id="opciones" name="opciones[]" class="selectpicker" data-style="btn-info" multiple title="Sin estados" data-header="Estados (seleccione uno o varios de un solo grupo):"> <optgroup label="todos"> <option data-subtext="Todos los servicios" data-icon="glyphicon-asterisk" value="TODOS">TODOS</option> </optgroup> <optgroup label="pendientes"> <option data-subtext="Solo servicios pendientes" value="Pendiente">Pendiente</option> <option data-subtext="Solo servicios realizados en la guardia" value="Guardia">Guardia</option> </optgroup> <optgroup label="terminados"> <option data-subtext="Solo servicios terminados" value="Terminado">Terminado</option> <option data-subtext="Solo servicios realizados en la guardia" value="Guardia">Guardia</option> </optgroup> <optgroup label="guardia"> <option data-subtext="Todos los servicios" data-icon="glyphicon-asterisk" value="TODOS">TODOS</option> <option data-subtext="Solo servicios realizados en la guardia" value="Guardia">Guardia</option> </optgroup> </select>
Me he basado en <optgroup> ... </optgroup> que me parece que es, sin ser la mejor solución, la más digna.
Por cierto, me encaminé a ello después de leer https://www.w3.org/TR/html401/interact/forms.html#h-17.6
Si es de tu interés las soluciones estudiadas que "deberían funcionar", pero no en el caso de tu página, me comentas.
Espero tus noticias. Votos: 2 - Link respuesta -
Fecha: 04-06-2017 12:34:29 Hola Txema
Antes que nada muchas gracias por sumarte a la resolución del problema.
Yo había visto tu respuesta anterior, que no sé qué habrá pasado que no la veo, ¿la has eliminado? pues esa respuesta me había ayudado mucho a entender mejor el tema, con esa respuesta comencé hacer pruebas e investigado y había arribada a una posible solución.
No había podido responder antes porque la pagina estaba inestable por mantenimiento.
Recapitulando, creo que el codigo que habías compartido en la anterior respuesta era el siguiente:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Prueba</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- SELECT --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script> <style> /* centered columns styles */ .row-centered { text-align:center; } .col-centered { display:inline-block; float:none; /* reset the text-align */ text-align:left; /* inline-block space fix */ margin-right:-4px; } </style> <script type="text/javascript"> $(document).ready(function () { //$('#opciones').val('TODOS'); $("#opciones").change(function(){ if ($(this).val() == "TODOS") { alert ("Has seleccionado "+$(this).val()); $("#opciones option[value='TODOS']").prop('disabled', false); $("#opciones option[value='Pendiente']").prop('disabled', true); $("#opciones option[value='Terminado']").prop('disabled', true); $("#opciones option[value='Guardia']").prop('disabled', true); } else { alert ($(this).val()); $("#opciones option[value='TODOS']").prop('disabled', true); $("#opciones option[value='Pendiente']").prop('disabled', false); $("#opciones option[value='Terminado']").prop('disabled', false); $("#opciones option[value='Guardia']").prop('disabled', false); } }); }); </script> </head> <body> <div class="panel panel-primary"> <div class="panel-heading"><h1 class="text-center">Seleccion</h1></div> <div class="panel-body"> <div class="row"> </div><!-- row una fila en blanco para dar un espaciado arriba --> <div class="container-fluid"> <form action="post.php" method="post"> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="col-md-3 col-centered"> <label class="control-label " for="opciones">Estados:</label> <select id="opciones" name="opciones[]" class="selectpicker" data-style="btn-info" multiple title="Sin estados" data-header="Estados solo:"> <option data-subtext="Todos los servicios" data-icon="glyphicon-asterisk" value="TODOS">TODOS</option> <option data-subtext="Solo servicios pendientes" value="Pendiente" >Pendiente</option> <option data-subtext="Solo servicios terminados" value="Terminado" >Terminado</option> <option data-subtext="Solo servicios realizados en la guardia" value="Guardia" >Guardia</option> </select> </div> <div class="row row-centered"> <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Buscar</button> </div> </form> </div> <div class="row"> </div><!-- row una fila en blanco para dar un espaciado arriba --> <div class="row"> </div><!-- row una fila en blanco para dar un espaciado arriba --> <div class="panel-footer text-center text-primary">Test</div> </div></div> </body> </html>
Con ese codigo había comenzado hacer pruebas e investigado.
En la libreria bootstrap-select hay un método que había que aplicar luego de alterar el DOM.
selectpicker('refresh')
Dice algo como: Para actualizar mediante programación una selección con JavaScript, primero manipule la selección y, a continuación, utilice el método refresh para actualizar la interfaz de usuario para que coincida con el nuevo estado. Esto es necesario al eliminar o agregar opciones, o al deshabilitar / habilitar una selección a través de JavaScript.
Ejemplo de uso:
$('#opciones').selectpicker('refresh');
Dicho esto, altere el codigo con la lógica de la selección de opciones y el codigo habia quedado de la siguiente manera:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Prueba</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- SELECT --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script> <style> /* centered columns styles */ .row-centered { text-align:center; } .col-centered { display:inline-block; float:none; /* reset the text-align */ text-align:left; /* inline-block space fix */ margin-right:-4px; } </style> <script type="text/javascript"> $(document).ready(function () { $("#opciones").change( function(){ var opcionSelecionada = $(this).val(); chequearOpciones(opcionSelecionada); } ); function selecionarTodoServicio(){ } function chequearOpciones(valorOpcion){ if (valorOpcion == "TODOS") { //alert ("Has seleccionado "+valorOpcion); $("#opciones option[value='TODOS']").prop('disabled', false); $("#opciones option[value='Pendiente']").prop('disabled', true); $("#opciones option[value='Terminado']").prop('disabled', true); $("#opciones option[value='Guardia']").prop('disabled', true); } else { $("#opciones option[value='TODOS']").prop('disabled', true); $("#opciones option[value='Pendiente']").prop('disabled', false); $("#opciones option[value='Terminado']").prop('disabled', false); $("#opciones option[value='Guardia']").prop('disabled', false); if (valorOpcion == "Pendiente" || valorOpcion == "Terminado" || valorOpcion == "Guardia" || valorOpcion == "Pendiente,Guardia" || valorOpcion == "Terminado,Guardia" ){ $("#opciones option[value='TODOS']").prop('disabled', true); }else { $("#opciones option[value='TODOS']").prop('disabled', false); } if (valorOpcion == "Pendiente" || valorOpcion == "Pendiente,Guardia"){ $("#opciones option[value='Terminado']").prop('disabled', true); } if (valorOpcion == "Terminado" || valorOpcion == "Terminado,Guardia"){ $("#opciones option[value='Pendiente']").prop('disabled', true); } } $('#opciones').selectpicker('refresh'); } }); </script> </head> <body> <div class="panel panel-primary"> <div class="panel-heading"><h1 class="text-center">Seleccion</h1></div> <div class="panel-body"> <div class="row"> </div><!-- row una fila en blanco para dar un espaciado arriba --> <div class="container-fluid"> <form action="post.php" method="post"> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="col-md-3 col-centered"> <label class="control-label " for="opciones">Estados:</label> <select id="opciones" name="opciones[]" class="selectpicker" data-style="btn-info" multiple title="Sin estados" data-header="Estados solo:"> <option data-subtext="Todos los servicios" data-icon="glyphicon-asterisk" value="TODOS">TODOS</option> <option data-subtext="Solo servicios pendientes" value="Pendiente" >Pendiente</option> <option data-subtext="Solo servicios terminados" value="Terminado" >Terminado</option> <option data-subtext="Solo servicios realizados en la guardia" value="Guardia" >Guardia</option> </select> </div> <div class="row row-centered"> <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Buscar</button> </div> </form> </div> <div class="row"> </div><!-- row una fila en blanco para dar un espaciado arriba --> <div class="row"> </div><!-- row una fila en blanco para dar un espaciado arriba --> <div class="panel-footer text-center text-primary">Test</div> </div></div> </body> </html>
Con las respuestas de Carlos y Txema me han clarificado bastante el tema brindandome un punto de partida para investigar y hacer pruebas.
Haciendo algunas pruebas más utilizando los métodos y opciones como eventos propios de la librería de bootstrap-select finalmente logre lo siguiente:
1 - Cuando se cargue la página quede seleccionado por defecto la opción TODOS y el resto de las opciones que no se puedan seleccionar.
2 - El uso de condicionales con IF controlando que opción se selecionar para habilitar o deshabilitar el resto de las opciones.
3 - En caso que se haya elegido la opción TODOS, se autocierre el SELECT.
4 - En caso que se abra el select y se destilde la opción TODOS y vuelva al formulario sin seleccionar ninguna opcion que esta disponible por defecto marca automáticamente nuevamente la opción TODOS, esto ocurre cuando se sale del SELECT sin elegir ninguna opcion como se puede apreciar en la siguiente imagen:
El codigo final:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Prueba</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- SELECT --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script> <style> /* centered columns styles */ .row-centered { text-align:center; } .col-centered { display:inline-block; float:none; /* reset the text-align */ text-align:left; /* inline-block space fix */ margin-right:-4px; } </style> <script type="text/javascript"> $(document).ready(function () { $('#opciones').on('loaded.bs.select', function (e) { // Cuando carga la pagina se seleciona por defecto la opcion TODOS $('#opciones').val('TODOS'); selecionarTodoServicio(); }); $('#opciones').on('hide.bs.select', function (e) { // en caso que se cierre el select y no se haya selecionado ningunas opcion por defecto se seleciona TODOSS opcionSelecionada = $('select[id=opciones]').val(); if (opcionSelecionada.length==0){ $('#opciones').val('TODOS'); selecionarTodoServicio(); $('#opciones').selectpicker('refresh'); } }); // detecta si se seleciono algo del menu $('#opciones').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) { var opcionSelecionada = $(e.currentTarget).val(); if (opcionSelecionada != "Pendiente" || opcionSelecionada != "Terminado" || opcionSelecionada != "Guardia" || opcionSelecionada != "Pendiente,Guardia" || opcionSelecionada != "Terminado,Guardia" ){ $("#opciones option[value='TODOS']").prop('disabled', false); } // verifica que ocion se seleciono if (opcionSelecionada == "TODOS") { selecionarTodoServicio(); // cierro el select $('#opciones').selectpicker('toggle'); } else { desSelecionarTodoServicio(); if (opcionSelecionada == "Pendiente" || opcionSelecionada == "Terminado" || opcionSelecionada == "Guardia" || opcionSelecionada == "Pendiente,Guardia" || opcionSelecionada == "Terminado,Guardia" ){ $("#opciones option[value='TODOS']").prop('disabled', true); }else { $("#opciones option[value='TODOS']").prop('disabled', false); } if (opcionSelecionada == "Pendiente" || opcionSelecionada == "Pendiente,Guardia"){ $("#opciones option[value='Terminado']").prop('disabled', true); } if (opcionSelecionada == "Terminado" || opcionSelecionada == "Terminado,Guardia"){ $("#opciones option[value='Pendiente']").prop('disabled', true); } } $('#opciones').selectpicker('refresh'); }); function selecionarTodoServicio(){ // Esta funcion permite selecionar TODOS pero no al resto de las opciones $("#opciones option[value='TODOS']").prop('disabled', false); $("#opciones option[value='Pendiente']").prop('disabled', true); $("#opciones option[value='Terminado']").prop('disabled', true); $("#opciones option[value='Guardia']").prop('disabled', true); //actualiza la interfaz del select despues de los cambios $('#opciones').selectpicker('refresh'); } function desSelecionarTodoServicio(){ // Esta funcion no permite selecionar TODOS pero si al resto de las opciones $("#opciones option[value='TODOS']").prop('disabled', true); $("#opciones option[value='Pendiente']").prop('disabled', false); $("#opciones option[value='Terminado']").prop('disabled', false); $("#opciones option[value='Guardia']").prop('disabled', false); //actualiza la interfaz del select despues de los cambios $('#opciones').selectpicker('refresh'); } }); </script> </head> <body> <div class="panel panel-primary"> <div class="panel-heading"><h1 class="text-center">Seleccion</h1></div> <div class="panel-body"> <div class="row"> </div><!-- row una fila en blanco para dar un espaciado arriba --> <div class="container-fluid"> <form action="post.php" method="post"> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="col-md-3 col-centered" id="capaOpciones"> <label class="control-label " for="opciones">Estados:</label> <select id="opciones" name="opciones[]" class="selectpicker" data-style="btn-info" multiple title="Sin estados" data-header="Opciones:"> <option data-subtext="Todos los servicios" data-icon="glyphicon-asterisk" value="TODOS">TODOS</option> <option data-subtext="Solo servicios pendientes" value="Pendiente" >Pendiente</option> <option data-subtext="Solo servicios terminados" value="Terminado" >Terminado</option> <option data-subtext="Solo servicios realizados en la guardia" value="Guardia" >Guardia</option> </select> </div> <div class="row row-centered"> <button type="submit" class="btn btn-primary" id="btn-buscar"><span class="glyphicon glyphicon-search"></span> Buscar</button> </div> </form> </div> <div class="row"> </div><!-- row una fila en blanco para dar un espaciado arriba --> <div class="row"> </div><!-- row una fila en blanco para dar un espaciado arriba --> <div class="panel-footer text-center text-primary">Test</div> </div></div> </body> </html>
El codigo ONLINE. Para ejecutarlo le dan al botón [Run -F9]
En el ejercicio de buscar una solución he aprendido mucho más.
No sé si sé si el ultimo codigo esta bien como esta o si se puede mejorar. Espero opinion antes de cerrar a la Pregunta.
Muchas gracias a Carlos y Txema por la ayuda que me han prestado gentilmente.
Que tengan un buen dia
Saludos Votos: 1 - Link respuesta -
Fecha: 04-06-2017 13:35:17 Hola Walter:
Es cierto que siguiendo tu pregunta publicaba una de mis posibles soluciones (no recuerdo si era por la vía de display: "none", display: "" // hide() vs show() ocultando lo que no debía pulsar, o por la vía de disabled, true/false.
También lo probé por pasar el código a javascript, olvidándome de JQuery por sus interferencias con los enlaces que no controlaba según el desarrollo del código (¿¿aria-disabled="false" aria-selected="false"??).
Lo borré porque no aportaba nada nuevo. Solo preguntas.
Mi aporte publicado es lo más aproximado que ví después de leer en el enlace publicado por www.w3.org que Disabled (disabled) - no está disponible en este contexto
Mi anterior respuesta responde a que mantengas el código y los enlaces CSS y JQuery de tu aplicación de forma limpia.
Si quieres que publique las pruebas mencionadas anteriormente, (que no sirven en tu contexto pero pueden ser útiles para futuras consultas de terceros), gustosamente lo haré.
Saludos y éxito.
P.D.: Efectivamente, el código que publicas es una de mis pruebas, que consideraba mejores, pero sin resultado eficiente para tu página. Bien copiado (ja ja). Votos: 2 - Link respuesta -
Fecha: 04-06-2017 14:23:03 Ah, muy interesante acorde a tu tema (aunque no pude adaptarlo por los enlaces externos de tu proyecto)
Me llamó la atención porque desde un planteamiento aparentemente complejo la programación es muy sencilla.
Aunque es HTML4 y es Javascript puro y duro, funciona perfectamente con HTML5 (mis créditos al enlace original)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ejercicio CU01184E JavaScript</title><meta charset="utf-8"> <style type="text/css"> body, p {margin-left:30px; font-family: sans-serif;} .estiloForm {background-color: #f3f3f3; border: solid 2px black; margin-left:20px; width: 330px; padding:10px; } .estiloForm label {display: block; width: 120px; float: left; text-align:right; margin-bottom: 35px; padding-right: 20px;} br {clear: left;} input[type="submit"], input[type="reset"] {margin:25px 5px 10px 5px;} </style> <script type="text/javascript"> window.onload = function () { ciudadSelect = document.getElementById('ciudad'); paisSelect = document.getElementById('pais'); ciudadSelect.addEventListener('change', deshabilitaPais); paisSelect.addEventListener('change', deshabilitaCiudad); } function reinicioSelect(){ for(var i=1; i<ciudadSelect.length; i++){ciudadSelect[i].disabled = false;} for(var i=1; i<paisSelect.length; i++){paisSelect[i].disabled = false;} } function deshabilitaCiudad(){ var a = 0; var b = 0; if(paisSelect.selectedIndex == 1){a=1;b=2;} if(paisSelect.selectedIndex == 2){a=3; b=4;} if(paisSelect.selectedIndex == 3){a=5; b=6;} if(paisSelect.selectedIndex == 4){a=7;b=8;} if(paisSelect.selectedIndex == 0){ ciudadSelect.selectedIndex = 0; reinicioSelect(); }else{ for(var i=1; i<ciudadSelect.length; i++){ if(i==a || i==b){ ciudadSelect[i].disabled = false; }else{ ciudadSelect[i].disabled = true; } } } } function deshabilitaPais(){ var a = 0; if(ciudadSelect.selectedIndex == 1 || ciudadSelect.selectedIndex == 2){a=1; paisSelect.value = 'mexico';} if(ciudadSelect.selectedIndex == 3 || ciudadSelect.selectedIndex == 4){a=2; paisSelect.value = 'espanna';} if(ciudadSelect.selectedIndex == 5 || ciudadSelect.selectedIndex == 6){a=3; paisSelect.value = 'peru';} if(ciudadSelect.selectedIndex == 7 || ciudadSelect.selectedIndex == 8){a=4; paisSelect.value = 'colombia';} if(ciudadSelect.selectedIndex == 0){ paisSelect.selectedIndex = 0; reinicioSelect(); }else{ for(var i=1; i<paisSelect.length; i++){ if(i==a){ paisSelect[i].disabled = false; }else{ paisSelect[i].disabled = true; } } } deshabilitaCiudad(); } </script> </head> <body> <h2>Cursos aprenderaprogramar.com</h2><h3>Ejercicio CU01184E JavaScript</h3> <div class="estiloForm"> <form name ="formularioProcedencia" method="get" action="http://aprenderaprogramar.com"> <p>Elija país y ciudad</p> <label>País:</label> <select id="pais" name="pais"> <option value="">Elija opción</option> <option value="mexico">México</option> <option value="espanna">España</option> <option value="peru">Perú</option> <option value="colombia">Colombia</option> </select><br/> <label>Ciudad:</label> <select id="ciudad" name="ciudad"> <option value="">Elija opción</option> <option value="mexicoDF">México D.F.</option> <option value="guadalajara">Guadalajara</option> <option value="madrid">Madrid</option> <option value="barcelona">Barcelona</option> <option value="lima">Lima</option> <option value="trujillo">Trujillo</option> <option value="bogota">Bogotá</option> <option value="cali">Cali</option> </select><br/> <input class="botonFormulario" type="submit" value="Enviar"/> <input class="botonFormulario" type="reset" value="Cancelar"/> </form> </div> </body> </html>
NOTA: Omite el valor cero (0) ya que corresponde en ambos select a <option value="">Elija opción</option>
Es muy fácil de entender aunque, como tantas veces, es cuestión de planificar la solución atendiendo a la lógica y olvidarse de la programación para después aplicarla. Votos: 2 - Link respuesta -
Fecha: 04-06-2017 18:10:14 Txema
Cito tu respuesta:
Si quieres que publique las pruebas mencionadas anteriormente, (que no sirven en tu contexto pero pueden ser útiles para futuras consultas de terceros), gustosamente lo haré.
Si lo deseas puedes publicar tus pruebas anteriores a fin de que quede registrado para consultas futuras y puede que le sirva a alguien.
Tu último codigo expuesto que es con Javascript puro y duro manipulando el DOM HTML esta bueno para comprender su funcionamiento. Es de utilidad para el aprendizaje.
No aplica para el proyecto ya que utilizo Jquery y bootstrap. Como digo es bueno para otras referencias.
Dejo online tu codigo que se puede ejecutar.
He actualizado mi codigo para alterar el CSS y sea mas vistoso como se aprecia en la siguiente imagen:
El codigo:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>bootstrap-select</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- SELECT --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script> <style> /* centered columns styles */ .row-centered { text-align:center; } .col-centered { display:inline-block; float:none; /* reset the text-align */ text-align:left; /* inline-block space fix */ margin-right:-4px; } /* SELECT */ .opcionBold { font-weight: bold !important; } </style> <script type="text/javascript"> $(document).ready(function () { $('#opciones').on('loaded.bs.select', function (e) { // Cuando carga la pagina se seleciona por defecto la opcion TODOS $('#opciones').val('TODOS'); selecionarTodoServicio(); }); $('#opciones').on('hide.bs.select', function (e) { // en caso que se cierre el select y no se haya selecionado ningunas opcion por defecto se seleciona TODOSS opcionSelecionada = $('select[id=opciones]').val(); if (opcionSelecionada.length==0){ $('#opciones').val('TODOS'); selecionarTodoServicio(); $('#opciones').selectpicker('refresh'); } }); // detecta si se seleciono algo del menu $('#opciones').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) { var opcionSelecionada = $(e.currentTarget).val(); if (opcionSelecionada != "Pendiente" || opcionSelecionada != "Terminado" || opcionSelecionada != "Guardia" || opcionSelecionada != "Pendiente,Guardia" || opcionSelecionada != "Terminado,Guardia" ){ $("#opciones option[value='TODOS']").prop('disabled', false); } // verifica que ocion se seleciono if (opcionSelecionada == "TODOS") { selecionarTodoServicio(); // cierro el select $('#opciones').selectpicker('toggle'); } else { desSelecionarTodoServicio(); if (opcionSelecionada == "Pendiente" || opcionSelecionada == "Terminado" || opcionSelecionada == "Guardia" || opcionSelecionada == "Pendiente,Guardia" || opcionSelecionada == "Terminado,Guardia" ){ $("#opciones option[value='TODOS']").prop('disabled', true); }else { $("#opciones option[value='TODOS']").prop('disabled', false); } if (opcionSelecionada == "Pendiente" || opcionSelecionada == "Pendiente,Guardia"){ $("#opciones option[value='Terminado']").prop('disabled', true); } if (opcionSelecionada == "Terminado" || opcionSelecionada == "Terminado,Guardia"){ $("#opciones option[value='Pendiente']").prop('disabled', true); } } $(this).find('option').css('background-color', 'transparent').css('color', 'black'); $(this).find('option:selected').css('background-color', '#337AB7').css('color', 'white'); $('#opciones').selectpicker('refresh'); }); function selecionarTodoServicio(){ // Esta funcion permite selecionar TODOS pero no al resto de las opciones $("#opciones option[value='TODOS']").prop('disabled', false); $("#opciones option[value='Pendiente']").prop('disabled', true); $("#opciones option[value='Terminado']").prop('disabled', true); $("#opciones option[value='Guardia']").prop('disabled', true); // Se establece el color de fondo y el color de la letra de la opcion $('#opciones').find('option:selected').css('background-color', '#337AB7').css('color', 'white'); //actualiza la interfaz del select despues de los cambios $('#opciones').selectpicker('refresh'); } function desSelecionarTodoServicio(){ // Esta funcion no permite selecionar TODOS pero si al resto de las opciones $("#opciones option[value='TODOS']").prop('disabled', true); $("#opciones option[value='Pendiente']").prop('disabled', false); $("#opciones option[value='Terminado']").prop('disabled', false); $("#opciones option[value='Guardia']").prop('disabled', false); //actualiza la interfaz del select despues de los cambios $('#opciones').selectpicker('refresh'); } }); </script> </head> <body> <div class="panel panel-primary"> <div class="panel-heading"><h1 class="text-center">Seleccion</h1></div> <div class="panel-body"> <div class="row"> </div><!-- row una fila en blanco para dar un espaciado arriba --> <div class="container-fluid"> <form action="post.php" method="post"> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="col-md-3 col-centered" id="capaOpciones"> <label class="control-label " for="opciones">Estados:</label> <select id="opciones" name="opciones[]" class="selectpicker" data-style="btn-primary" multiple title="Sin estados" data-header="Opciones:"> <option data-subtext="Todos los servicios" data-icon="glyphicon-asterisk" value="TODOS" class="opcionBold">TODOS</option> <option data-subtext="Solo servicios pendientes" value="Pendiente" >Pendiente</option> <option data-subtext="Solo servicios terminados" value="Terminado" >Terminado</option> <option data-subtext="Solo servicios realizados en la guardia" value="Guardia" >Guardia</option> </select> </div> <div class="row row-centered"> <button type="submit" class="btn btn-primary" id="btn-buscar"><span class="glyphicon glyphicon-search"></span> Buscar</button> </div> </form> </div> <div class="row"> </div><!-- row una fila en blanco para dar un espaciado arriba --> <div class="row"> </div><!-- row una fila en blanco para dar un espaciado arriba --> <div class="panel-footer text-center text-primary">Prueba de bootstrap-select</div> </div></div> </body> </html>
Dejo online el codigo que se puede ejecutar.
Saludos Votos: 3 - Link respuesta -
Fecha: 05-06-2017 02:18:41 Hola Walter:
Aparte del .prop('disabled', true) // prop('disabled', false) que lo deseche a falta de la línea $('#opciones').selectpicker('refresh');, hace exactamente lo mismo si sustituímos:
.prop('disabled', true); por .attr('disabled', 'disabled');
prop('disabled', false); por .removeAttr('disabled');
Es a partir de jQuery 1.6, que el .prop() proporciona una forma de recuperar explícitamente los valores de .attr() , mientras que .attr() recupera los atributos.
Las opciones .css("display", "none"); .css("display", "block"); así como .hide(); .show(); que irían por ocultar lo que no debemos utilizar no funcionan correctamente en este caso Votos: 1 - Link respuesta -
Fecha: 07-06-2017 16:15:44 Gracias Txema por tu ultima explicacion.
Habia estado viendo la diferencia de utilizar .prop() y ,attr()
En este caso entiendo que se deberia utilizar .prop()
Explicación en español:
Método prop() de jQuery y diferencias con attr()
JQUERY: CÓMO USAR ATTR() Y PROP()
Saludos Votos: 2 - Link respuesta
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
