Ne permettre qu'une seule sélection dans un 'selectable'

**Thewil** · 02/07/2009, 14h43

Salut à tous,

J'ai regardé dans la doc de jQuery mais je n'ai rien vu d'intéressant pour ne permettre la sélection que dans seul élément dans l'objet jQuery "SELECTABLE".
Quelqu'un aurait'il une idée svp ?

Merci

**danielhagnoul** · 02/07/2009, 15h45

Bonjour.

Voici un exemple ou seul les li ayant la class bouge sont selectable :

Code :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
        /*POUR TEST*/
        #selectable .ui-selecting { background: #FECA40; }
        #selectable .ui-selected { background: #F39814; color: white; }
        #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
 
        .bouge {}
 
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#selectable").selectable({ filter: 'li.bouge' });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <ol id="selectable">
            <li class="ui-widget-content bouge">Item 1</li>
            <li class="ui-widget-content bouge">Item 2</li>
            <li class="ui-widget-content">Item 3</li>
            <li class="ui-widget-content">Item 4</li>
            <li class="ui-widget-content">Item 5</li>
            <li class="ui-widget-content bouge">Item 6</li>
            <li class="ui-widget-content">Item 7</li>
        </ol>
    </div>
</body>
</html>

**Thewil** · 02/07/2009, 15h58

J'ai du mal m'exprimer. En fait ce que je voudrais c'est que désactiver le ctrl+click qui permet de sélectionner plusieurs lignes de la liste. En gros si j'ai un élément sélectionné et que j'en sélectionne un autre je voudrais que l'ancien se déselectionne.

**danielhagnoul** · 02/07/2009, 18h38

Bonsoir.

J'avais mal lu et/ou mal compris, mais comme je ne connaissais pas selectable vos questions mon permis de le découvrir.

Il n'y en effet aucune option disponible pour supprimer le CTR-Click ou la sélection multiple en traçant un rectangle avec le pointeur.

J'ai essayé ceci qui me semble convenir :

Code :

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
 
        // les éléments sélectionés ont la classe ui-selected
        var prevSelectedElement = null;
 
        $(document).ready(function(){
            $("#selectable").selectable({
                filter: 'li.bouge',
                selected: function(event,ui){
                    if (prevSelectedElement === null) {
                        prevSelectedElement = ui.selected;
                    } else {
                        $(prevSelectedElement).removeClass("ui-selected");
                        prevSelectedElement = ui.selected;
                    }
                }
            });
        });

**Thewil** · 03/07/2009, 09h00

Bonjour,

Merci pour l'astuce. En y réfléchissant un peu je m'étais dit qu'il faudrait surement utilisé qqchose de la sorte.

Je teste et je viens dire ce qu'il en est.

**Thewil** · 03/07/2009, 10h17

Bon bah j'ai envie de dire parfait. Merci beaucoup

Ne permettre qu'une seule sélection dans un 'selectable'

jQuery

Discussions similaires

Partager

Partager