IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Activation d'un bouton par click sur une checkbox [UI Mobile]


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Septembre 2010
    Messages
    121
    Détails du profil
    Informations forums :
    Inscription : Septembre 2010
    Messages : 121
    Par défaut Activation d'un bouton par click sur une checkbox
    Bonjour,

    Je suis actuellement sur un projet jquery-mobile (avec un serveur applicatif javaEE) : j'aimerais savoir si il est possible que certain champ soit visible ou invisible par l'appui sur une checkbox.

    Mon code :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <div data-role="content">	             
        <ul data-role="listview" data-split-icon="gear">
            <li>
                <a href="<s:property value="%{getText('Welcome.url.facebook')}"/>" data-inline="true"   data-ajax="false">
                    <img src="../images/facebook_logo100px100.png" style="text-align: center;"/>
                    <h3>Facebook</h3>
                    <p> <s:property value="%{getText('Welcome.facebook')}"/> </p>
                </a>                  
            </li>
            <li>
                <a href="<s:property value="%{getText('Welcome.url.twitter')}"/>" data-inline="true"  data-ajax="false" >
                    <img src="../images/twitter-logo-1100px100.png" style="text-align: center;"/>
                    <h3>Twitter</h3>
                    <p>  <s:property value="%{getText('Welcome.twitter')}"/></p>
                </a>
            </li>
        </ul>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
                <label for="checkbox-1"><s:property value="%{getText('Welcome.generaltermofuser')}"/></label>
            </fieldset>
        </div>
    </div>

    J'aimerais que ma checkbox puisse contrôler ma liste view afin que l'utilisateur ne puisse pas clicker sur la list view temps qu'il na pas appuyé sur la checkbox
    Car ma checkbox représente les conditions générales d'utilisation.

    Merci de votre aide.

  2. #2
    Membre confirmé
    Inscrit en
    Septembre 2010
    Messages
    121
    Détails du profil
    Informations forums :
    Inscription : Septembre 2010
    Messages : 121
    Par défaut
    bon déjà j'ai trouvé comment avoir l'événement d'appui sur la checkbox :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    $(document).ready(function() { // <-- ensures the DOM is ready
        $("input[type='checkbox-1']").attr("checked",true).checkboxradio("refresh");
        if($('input[name=checkbox-1]').attr('checked') != true){
            alert("checkbox is not Checked");
        }
    });
    et mon bloque de jquery mobile :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom"  />
            <label for="checkbox-1"><s:property value="%{getText('Welcome.generaltermofuser')}"/></label>
        </fieldset>
    </div>

    Maintenant j'aimerais comprendre pourquoi l’alerte n’apparaît qu'au rafraîchissement de la page avec F5 et n’apparaît pas lorsque je clique sur le bouton. Si quelqu'un a une idée qu'il me fasse signe le code ci dessous fonctionne aussi :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     $(document).on('pageinit', function() { // <-- ensures the DOM is ready 
    // a la place de  $(document).ready(function() {

    J'ai trouver ce code la sur le net mais il semble ne pas marcher dans mon cas :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    $(".validateonchange").live("change", function() {
        alert("My checked attribute is : " + $(this).prop('checked'));
    });
    });

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Apparemment, tu ne comprends pas tout ce que tu essayes de faire et en particulier, tu ne comprends pas les sélecteurs que tu utilises...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("input[type='checkbox-1']")
    Tu es vraiment sûr que checkbox-1 est un type valide qui est présent dans ton code ?

    Je ne vois nulle part d'élément ayant la classe validateonchange.

    Et pour finir, .live() est déprécié...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  4. #4
    Membre confirmé
    Inscrit en
    Septembre 2010
    Messages
    121
    Détails du profil
    Informations forums :
    Inscription : Septembre 2010
    Messages : 121
    Par défaut
    Bonjour,

    Tu es vraiment sûr que checkbox-1 est un type valide qui est présent dans ton code ?
    Oui c'est bien valide et ca marche :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />




    Ca marche bien. C'étais le 'ui-disabled' que je ne connaissais pas je laisse le code au cas ou cela intéresse quelqu'un .

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $('#listview').addClass('ui-disabled');   
        if($('#checkbox-1').click(function(check){
            if($('#checkbox-1').prop('checked') == true){                   
                $('#listview').removeClass('ui-disabled');
                // alert("it s Work " + $('#checkbox-1').prop('checked') );
            }
            if($('#checkbox-1').prop('checked')!= true){
                $('#listview').addClass('ui-disabled');  
                //  alert("it s Work " + $('#checkbox-1').prop('checked') );
            }
    }));
    Cordialement

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [PPT-2007] Enettre un son par un click sur un bouton ET aller sur une diapositive
    Par Carlos31 dans le forum Powerpoint
    Réponses: 2
    Dernier message: 27/11/2014, 15h41
  2. Bouton par défaut sur une MSGBOX
    Par zooffy dans le forum Contribuez
    Réponses: 15
    Dernier message: 30/10/2013, 15h24
  3. activation/dasactivation radio bouton par click
    Par mekongtso dans le forum C#
    Réponses: 4
    Dernier message: 09/03/2013, 14h03
  4. Activation d'un bouton en fonction d'une checkbox
    Par zamoto dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 24/05/2006, 14h19
  5. [JComboBox] Ouverture de déroulant par click sur un bouton
    Par oursblanc dans le forum AWT/Swing
    Réponses: 7
    Dernier message: 06/02/2006, 14h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo