Bonjour,
Je me permet de poster ce message car je suis actuellement bloqué sur un problème avec la combobox de JQuery dont j'ai besoin pour une application. Pour résumer j'ai plusieurs champs déroulants select/option que je transforme en combobox. Dans le constructeur de la combobox j'ai ajouté la propriété required aux champs input qui sont créés pour que l'utilisateur soit obligé de les remplir avant de valider, cependant j'ai besoin qu'un seul d'entre eux n'ai pas cette propriété mais vu mon mauvais niveau dans ce language, je n'y arrive pas !

Voici mon code HTML / PHP :

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
 
                        <label for="commune">Commune : </label>
				<select name="commune" id="commune"/>
					<option value=""></option>
					<?php
                                        foreach($communeAll AS $result)
                                        {
                                                $commune = new Commune($result);
                                                echo '<option value="'.$commune->insee_commune.'">'.$commune->nom_commune.' - '.$commune->cp_commune.'</option>' ;
                                        }
                                        ?>
				</select><br>
 
			<label for="commune2">Commune 2: </label>
				<select name="commune2" id="commune2">
					<option value=""></option>
					<?php
                                        foreach($communeAll AS $result)
                                        {
                                                $commune = new Commune($result);
                                                echo '<option value="'.$commune->insee_commune.'">'.$commune->nom_commune.' - '.$commune->cp_commune.'</option>' ;
                                        }
                                        ?>
				</select><br>
                     <label for="idEtab">Établissement actuel : </label>
				<select name="idEtab" id="idEtab"/>
					<option value=""></option>
					<?php
                                                foreach($etabEl AS $result)
                                                {
                                                        $etab = new Etab($result);
                                                        echo '<option value="'.$etab->rne_etab.'">'.$result->nom_type.' '.$etab->nom_etab.' - '.$etab->commune_etab.'</option>' ;
                                                }
                                        ?>
Mon JQuery :

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
  $( function() {
    $.widget( "custom.combobox", {
      _create: function() {
        this.wrapper = $( "<span>" )
          .addClass( "custom-combobox" )
          .insertAfter( this.element );
        this.element.hide();
        this._createAutocomplete();
        this._createShowAllButton();
      },
 
      _createAutocomplete: function() {
        var selected = this.element.children( ":selected" ),
          value = selected.val() ? selected.text() : "";
 
        this.input = $( "<input>" )
          .appendTo( this.wrapper )
          .val( value )
          .attr( "title", "" )
          .addClass( "custom-combobox-input" )
      	  .prop('required',true) /* On rajoute l'obligation de remplir le champ*/
          .autocomplete({
            delay: 0,
            minLength: 0,
            source: $.proxy( this, "_source" )
          })
          .tooltip({
            classes: {
              "ui-tooltip": "ui-state-highlight"
            }
          });
 
        this._on( this.input, {
          autocompleteselect: function( event, ui ) {
            ui.item.option.selected = true;
            this._trigger( "select", event, {
              item: ui.item.option
            });
          },
 
          autocompletechange: "_removeIfInvalid"
        });
      },
 
      _createShowAllButton: function() {
        var input = this.input,
          wasOpen = false;
 
        $( "<a>" )
          .attr( "tabIndex", -1 )
          .attr( "title", "Tout montrer" )
          .tooltip()
          .appendTo( this.wrapper )
          .button({
            icons: {
              primary: "ui-icon-triangle-1-s"
            },
            text: false
          })
          .removeClass( "ui-corner-all" )
          .addClass( "custom-combobox-toggle ui-corner-all" )
          .on( "mousedown", function() {
            wasOpen = input.autocomplete( "widget" ).is( ":visible" );
          })
          .on( "click", function() {
            input.trigger( "focus" );
 
            // Close if already visible
            if ( wasOpen ) {
              return;
            }
 
            // Pass empty string as value to search for, displaying all results
            input.autocomplete( "search", "" );
          });
      },
 
      _source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
        response( this.element.children( "option" ).map(function() {
          var text = $( this ).text();
          if ( this.value && ( !request.term || matcher.test(text) ) )
            return {
              label: text,
              value: text,
              option: this
            };
        }) );
      },
 
      _removeIfInvalid: function( event, ui ) {
 
        // Selected an item, nothing to do
        if ( ui.item ) {
          return;
        }
 
        // Search for a match (case-insensitive)
        var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
        this.element.children( "option" ).each(function() {
          if ( $( this ).text().toLowerCase() === valueLowerCase ) {
            this.selected = valid = true;
            return false;
          }
        });
 
        // Found a match, nothing to do
        if ( valid ) {
          return;
        }
 
        // Remove invalid value
        this.input
          .val( "" )
          .attr( "title", value + " n'existe pas" )
          .tooltip( "open" );
        this.element.val( "" );
        this._delay(function() {
          this.input.tooltip( "close" ).attr( "title", "" );
        }, 2500 );
        this.input.autocomplete( "instance" ).term = "";
      },
 
      _destroy: function() {
        this.wrapper.remove();
        this.element.show();
      }
    });
 
    $( "#commune" ).combobox();
    $( "#commune2" ).combobox();
    $( "#idEtab" ).combobox();
En gros je voudrais que l'input de commune 2 ne soit pas required, mais impossible de le "sélectionner" une fois créé pour faire :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
 $('#commune2 input').combobox().prop('required', false)
Qui ne marche pas...!
J'espère avoir été a peu près clair, j'ai un très faible niveau en JQuery et JavaScript, mon appli fonctionne essentiellement en PHP, j'en ai juste besoin pour apporter un peu de confort a l'utilisateur.
Merci d'avance !