Set element to select div for jQuery selectable

Question

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

Answer 1

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