Désactiver l'option select dans iOS Safari

j'ai implémenté un formulaire qui doit désactiver certaines options dans une boîte de sélection en utilisant Javascript. Il fonctionne très bien dans tous les navigateurs, mais pas dans Safari sur IOS (Bureau Safari-t-il droit).

j'ai regardé sur le web, mais il semble que personne n'ait eu ce problème jusqu'à présent, donc je ne suis pas sûr que ce soit une limitation Safari IOS ou quelque chose que j'oublie.

merci de votre aide, Miguel

10
demandé sur Michi 2011-05-24 14:31:02

5 réponses

Il n'y a pas d'autre alternative que de supprimer les options désactivées lors du développement pour iOS.

pour iPhone l'image est très claire: toutes les listes de sélection sont présentées comme des roues de clic dans toutes les circonstances, et ces roues n'acceptent pas les options désactivées. Cela est montré dans le simulateur iPhone ainsi que sur le iPhone réel.

pour l'iPad, l'image est plus confuse. Le simulateur iPad ne Gris out les options handicapées et les rend vraiment handicapés, tout comme mobile Safari et Safari de bureau font. Mais un iPad (iPad 1, tournant iOS 4.2.1, dans mon cas) vous montrera la roue de clic.

alors faites quelque chose comme ça au début de votre 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();
}
9
répondu Wytze 2012-11-14 20:29:20

j'ai une solution qui peut être utile pour vous aussi, et elle ne nécessite pas jQuery...

mon problème était que les options étaient activées dynamiquement et désactivées, donc l'idée de supprimer les options par jQuery les évitait d'être réutilisées.

innerHTML comme ceci:

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>
1
répondu DavidTaubmann 2015-07-19 00:10:12

si vous changez votre option désactivée en désactivé optgroup blanc, il semble donner le résultat désiré sans javascript supplémentaire nécessaire.

<optgroup disabled></optgroup>

contrairement à l'habitude

<option disabled></option>
0
répondu robalvey 2017-04-13 14:16:45

Tricher. Remplacez

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

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

et le style que par

optgroup:empty { ... }

-1
répondu John Pitcairn 2012-07-18 23:32:59

Avez-vous essayé:

disabled="disabled"

...sur l'élément option?

-2
répondu Barbagallo 2011-06-01 15:53:04