2011-05-24 17 views
9

Implementé un formulario que necesita deshabilitar ciertas opciones en un cuadro de selección usando Javascript. Funciona bien en todos los navegadores pero no en Safari en iOS (Desktop Safari lo hace bien).Deshabilitar la opción de selección en IOS Safari

He estado buscando por la web, pero parece que nadie ha tenido este problema hasta el momento, por lo que no estoy seguro de si se trata de una limitación de IOS de Safari o algo que estoy pasando por alto.

Gracias por cualquier ayuda, Miguel

Respuesta

9

No hay más alternativa que eliminar las opciones desactivadas al desarrollar para iOS.

Para iPhone, la imagen es muy clara: todas las listas de selección están diseñadas como ruedas de clic en cualquier circunstancia, y estas ruedas no aceptan opciones desactivadas. Esto se muestra tanto en el simulador de iPhone como en el iPhone real.

Para iPad, la imagen es más confusa. El simulador de iPad atenúa las opciones desactivadas y realmente las desactiva, al igual que Safari móvil y Safari de escritorio. Pero un real iPad (iPad 1, con iOS 4.2.1, en mi caso) le mostrará la rueda de clic.

Así que hacer algo como esto desde el principio en el script:

// check for ios device 
nP = navigator.platform;  
if (nP == "iPad" || nP == "iPhone" || nP == "iPod" || nP == "iPhone Simulator" || nP == "iPad Simulator"){ 
    $('select option[disabled]').remove(); 
} 
+0

funciona bien, gracias! – Viktor

+0

por cierto, ¿qué es el "simulador de iPhone" y dónde puedo encontrarlo? – Viktor

+1

@Viktor - iOS Simulator es una utilidad que se envía con XCode. – Brendan

-2

¿Usted ha intentado:

disabled="disabled" 

... en el elemento de opción?

+0

No he probado ...pero como dije, necesito que se haga usando JavaScript. – Michi

+4

que funcionaría en un navegador de escritorio, pero por alguna razón iOS no hace nada con el atributo desactivado. – Steve

+0

en iOS 7 lo hace, pero además no; ( – Viktor

-1

tramposo. Reemplazar

<option value="somevalue">Label text</option>

con

<optgroup label="Label text"></optgroup>

y el estilo que con

optgroup:empty { ... }

+1

No publique la misma respuesta en varias preguntas. Si la pregunta es un duplicado, deje un comentario en ese sentido. Si no es así, luego, adapte su respuesta a la pregunta. –

1

tengo una solución que puede ser útil para usted también, y no lo hace requiere jQuery ...

Mi problema fue que las opciones se activaron y desactivaron dinámicamente, por lo que la idea de eliminar las opciones de jQuery evitó que se reutilizaran.

Así que mi solución fue modificar la innerHtml así:

function swapAvailOpts(A, B) { 
 
    content = document.getElementById(B); 
 
    switch (A) { 
 
    case "X": 
 
     content.innerHTML = '<optgroup label="X"><option>X1</option><option>X2</option></optgroup>'; 
 
     break; 
 
    case "Y": 
 
     content.innerHTML = '<optgroup label="Y"><option>Y1</option><option>Y2</option></optgroup>'; 
 
     break; 
 
    default: 
 
     content.innerHTML = '<optgroup label="Z"><option>Z1</option><option>Z2</option></optgroup>'; 
 
    } 
 
}
<select name="choose" onChange="swapAvailOpts(this.value,'Choices');"> 
 
    <option>X</option> 
 
    <option>Y</option> 
 
    <option>Z</option> 
 
</select> 
 
<select name="Choices" id="Choices"> 
 
    <optgroup label="X"> 
 
    <option>X1</option> 
 
    <option>X2</option> 
 
    </optgroup> 
 
</select>

0

Si cambia de opción desactivada a optgroup blanco discapacitados, parece que dé el resultado deseado sin ningún javascript adicional necesario.

<optgroup disabled></optgroup> 

A diferencia de los habituales

<option disabled></option> 
Cuestiones relacionadas