Discussion :

[Malatok]

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.

[Malatok]

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'));
});
});

[Bovino]

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 ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(".validateonchange")

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

Et pour finir, .live() est déprécié...

[Malatok]

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