(30-08-2009, 05:02 PM)Gabriel a écrit : Par contre ça oblige à avoir un champ qui ne sert à rien et qui doit être mis par défaut...ce qui n'est pas forcement idéal...
Donc j'attends de voir ce que tu me propose

<div id="abilities_pane">

  <div class="unchecked" class="ability_box" id="ability_attack">

    <label for="item_ability_attack"><img alt="Attaquer" src="/images/attaque.png" /></label>

    <input id="item_ability_attack" name="action" type="checkbox" value="attack" />

  </div>



  <div class="unchecked" class="ability_box" id="ability_run">

    <label for="item_ability_run"><img alt="Attaquer" src="/images/run.png" /></label>

    <input id="item_ability_run" name="action" type="checkbox" value="run" />

  </div>

</div>



<!-- Et là tu mets ton bouton submit. -->

document.observe('dom:loaded', function(){

  

  var checked_elements = 0;

  var unchecked_opacity = 0.4;

  var checked_opacity = 1;

  

  var ability_boxes = $('div.abilities_pane .ability_box');

  

  ability_boxes.each(function(ability_box){

    var img = ability_box.select('img').first();

    var input = ability_box.select('input').first();

    

    input.hide();

    img.setOpacity(unchecked_opacity);

    

    Event.observe(img, 'click', function(event){

      

      if(checked_elements == 0){      

        // Retrieve the object in which the user click.

        var clicked_img = Event.element(event);

        clicked_img.toggleClassName('checked');

      

        if(clicked_img.hasClassName('checked')){

          clicked_img.setOpacity(checked_opacity);

          checked_elements += 1;

        }

        else {

          clicked_img.setOpacity(unchecked_opacity);

          checked_elements -= 1;

        }

      }

      else {

        alert("Vous ne pouvez pas effectuer plus d'une action.");

      }

    });

  });

  

});