Supprimer l'attribut disabled onClick du champ de formulaire disabled

je suis tombé sur ce fil dans un autre forum donc je suppose que je vais devoir le faire d'une manière différente.

http://www.webdeveloper.com/forum/showthread.php?t=186057

Firefox, et peut-être d'autres navigateurs, désactiver les événements DOM sur les champs de forme qui sont désactivés. Tout événement qui commence à le champ de forme désactivé est complètement annulé et ne propage pas la DOM tree. Corrigez-moi si je suis de mal, mais si vous cliquez sur le bouton désactivé, la source de l'événement est l' bouton désactivé et l'événement de clic est complètement anéanti. Navigateur littéralement ne sait pas que le bouton a obtenu cliqué, ni ne passe cliquez sur le de l'événement. C'est comme si vous en cliquant sur sur un trou noir sur la page web.

Travail autour de:

1. Style les champs de date à regarder comme si ils sont désactivés.
2. Faire un caché "use_date" champ de formulaire avec un peu de valeur à déterminer si vous devez utiliser les champs de date pendant le traitement.
3. ajouter une nouvelle fonction à onClick des champs de date qui changer la classe de style pour apparaître activé et défini la valeur" use_date" 1.

utiliser readonly au lieu de disabled

pour les cases à cocher au moins, cela les rend look désactivé mais se comporte normalement (testé sur Google Chrome). Vous devez prendre le clic et empêcher l'action par défaut de l'événement le plus approprié.

en utilisant jQuery, j'attache un gestionnaire d'événements aux parents de mes contrôles d'entrée.

<script type="text/javascript">
    $(function() {
        // disable all the input boxes
        $(".input").attr("disabled", true);

        // add handler to re-enable input boxes on click
        $("td:has(.input)").click(function() {
            $(".input", this).removeAttr("disabled");
        });
    });
</script>

tous mes contrôles d'entrée ont la classe" input " et ils existent dans leurs propres cellules de table. Si vous avez au moins enveloppé vos balises input dans un div, alors cela devrait fonctionner sans une table.

Citant Quirksmode.org :

" un événement de clic sur un champ de formulaire désactivé ne déclenche pas d'événements dans Firefox et Safari. Opera lance les événements mousedown et mouseup, mais pas l'événement click. IE lance mousedown et mouseup, mais pas click, sur le formulaire. Toutes ces implémentations sont considérées comme correctes."

est parfaite pour en savoir plus sur ces problèmes.

j'ai récemment eu un problème très similaire et je l'ai résolu en plaçant l'entrée dans une div et en déplaçant l'onClick à la div.

<div onClick="myEnableFunction('date_end');">
<input type="text" id="date_end" value="blah" disabled>
</div>

activer un élément désactivé sur un clic va à l'encontre du but de désactiver, vous ne pensez pas? Si vous voulez vraiment le comportement que vous décrivez, il suffit de le style "désactivé" et supprimer ces styles sur le clic.

N'implémente pas la logique de l'événement onClick dans la valeur onClick du champ input. C'est sûrement pour ça que ça ne marche pas à Firefox. Définissez plutôt une fonction comme la valeur de onClick. Par exemple:

<input type="text" id="date_end" value="blah" onClick="doSomething()" disabled>

<script type="text/javascript">
  function doSomething()
  {
    alert("button pressed");
  }
</script>

Il sera également intéressant de regarder dans JQuery. Vous pouvez l'utiliser pour ajouter ou supprimer des attributs d'éléments et toutes sortes d'autres choses. Par exemple, vous pouvez supprimer les personnes handicapées du champ input en écrivant une fonction comme celle-ci:

<script type="text/javascript">
      function doSomething()
      {
        alert("button pressed");
         $("#date_end").removeAttr('disabled'); //removes the disabled attribut from the  
                                                //element whose id is 'date_end'
      }
</script>

OU vous pouvez l'ajouter comme suit:

$("#date_end").attr('disabled','true');

le site de Jquery est ici

vous pouvez ajouter un div au-dessus de l'entrée qui est désactivée: vérifiez

 <div onclick="javascript:document.forma.demo1.disabled=false;" style="border:0px solid black; padding:00px;">
    <input type=text name="demo1" disabled style="width:30;">
  </div>

pour activer un élément désactivé du côté client, disons en réponse à une case cochée ou quelque chose, j'ai fini par devoir utiliser une combinaison de JS et jQuery, voir ci-dessous:

//enable the yes & no RB 
function enable()
{
        var RBNo = "rbnBusinessType";
        var RBYes = "rbnBusinessType";

        //jQuery approach to remove disabled from containing spans            
        $("#" + RBYes).parent().removeAttr('disabled');
        $("#" + RBNo).parent().removeAttr('disabled');

        //enable yes and no RBs
        document.getElementById(RBYes).disabled = false;
        document.getElementById(RBNo).disabled = false;               

}

après postback alors, vous aurez besoin d'accéder à la requête comme suit afin d'obtenir les valeurs des éléments activés côté client:

this._Organisation.BusinessTypeHUbZoneSmall = Demande.Params ["rbnBusinessTypeHUbZoneSmall"] = = rbnBusinessTypeHUbZoneSmallYes.Carte D'identité no 151920920."

Inspiration tirée de: https://stackoverflow.com/questions/6995738/asp-javascript-radiobutton-enable-disable-not-included-in-postback-ajax pour plus d'information

si vous voulez simplement empêcher l'utilisateur de taper des données dans votre champ, mais au lieu de vouloir le champ à populate sur un événement, ma solution de hack était de ne pas désactiver le champ d'entrée du tout, mais à la place après avoir exécuté mes onclick ou onfocus fonctions, d'appeler blur() de sorte que l'utilisateur ne peut pas éditer le champ.