0

I am building a web app that is using jQuery and the widget Selectable to let the user select multiple "files" (divs) on a page. This works fine but I want to specify so that they can only select a div if they click on the image (otherwise I cannot use the link without deselecting the others), how can I do this? Is there a way to deselect using this widget?

My jQuery code.

<script>
$(function() {
  $( "#selectable" ).selectable();
});
</script>

This is my HTML code:

<div class="file" id="<?php echo $i; ?>">

<img src="images/file_icon.jpg" />

<a href="#">Information</a>

</div>

UPDATE

Found a good solution here: Link doesn't work inside UI Selectable

Community
  • 1
  • 1
Jonathan Clark
  • 19,726
  • 29
  • 111
  • 175

1 Answers1

0

Can you share with more code? I don't know if I understand exactly what you want to achieve, but maybe you can try to use 'disabled' property?

You can set it to true when initializing :

$( "#selectable" ).selectable({ disabled: true });

and then set it to false on click on the image to allow enable selectable plugin:

$('img').click(function(){
    $( "#selectable" ).selectable( "option", "disabled", false );
});
Krzysztof Lenda
  • 398
  • 3
  • 8
  • There are basically no more code. I want to select the #photo div when clicking on the image only otherwise the div are selected when I try to use the links. – Jonathan Clark Jan 30 '12 at 10:49
  • Found a good solution here: http://stackoverflow.com/questions/4331303/link-doesnt-work-inside-ui-selectable. Works fine with that. – Jonathan Clark Jan 30 '12 at 10:52