jQuery selectable and disable inputs in selected table cells

Question

I a little bit new on jQuery and trying for several hours and days to get something simple working. I'm using a table with in each cell a input field. I've implemented the selectable option of jQuery to select multiple rows and columns.

What I want is that After the selection is done the input in the selected cells must be disabled.

With the following code all the inputs in the table will be disabled, not only the selected ones.

<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Selectable - Display as grid</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

  <style>
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
  </style>

  <script>
  $(function() {
    $( "#selectable" ).selectable({
      stop: function (event, ui) 
      {
        $(".ui-selected", this).each(function()
        {
          var element = $("#selectable tr td");
          var index = element.index(this);

          if (index > -1)
          {
            element.find('input[type=text]').prop('disabled', true);          
          }
        });
      },
      unselected: function (event, ui) 
      {
        //$(ui.unselected).removeClass('selectedfilter');
      }
    });                
  });

  </script>
</head>
<body>

<table id="selectable">
 <tr>
   <td class="ui-state-default"><input type="text" id="value1" value="1"/></td>
   <td class="ui-state-default"><input type="text" id="value2" value="2"/></td>
   <td class="ui-state-default"><input type="text" id="value3" value="3"/></td>
   <td class="ui-state-default"><input type="text" id="value4" value="4"/></td>
 </tr>
 <tr>
   <td class="ui-state-default"><input type="text" id="value1" value="1"/></td>
   <td class="ui-state-default"><input type="text" id="value2" value="2"/></td>
   <td class="ui-state-default"><input type="text" id="value3" value="3"/></td>
   <td class="ui-state-default"><input type="text" id="value4" value="4"/></td>
 </tr>
 <tr>
   <td class="ui-state-default"><input type="text" id="value1" value="1"/></td>
   <td class="ui-state-default"><input type="text" id="value2" value="2"/></td>
   <td class="ui-state-default"><input type="text" id="value3" value="3"/></td>
   <td class="ui-state-default"><input type="text" id="value4" value="4"/></td>
 </tr>
 <tr>
   <td class="ui-state-default"><input type="text" id="value1" value="1"/></td>
   <td class="ui-state-default"><input type="text" id="value2" value="2"/></td>
   <td class="ui-state-default"><input type="text" id="value3" value="3"/></td>
   <td class="ui-state-default"><input type="text" id="value4" value="4"/></td>
 </tr>
</table>


<div id="output"></div> 
</body>
</html>

Hopefully someone here can help me.

Kind regards.

Majid Akbari · Accepted Answer · 2014-05-24 19:13:48Z

1

Change your JavaScript to :

$(function() {
$( "#selectable" ).selectable({
  stop: function (event, ui) 
  {
      $("td.ui-selected input").prop('disabled', true);
  },
  unselected: function (event, ui) 
  {          
    $(ui.unselected).removeClass('selectedfilter');
  }
 });                
});

check the live sample in jsfiddle

answered May 24, 2014 at 19:13

Majid Akbari

2101 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ruald Ordelman Over a year ago

Nice, thanks for helping me. The only remaining thing now is about scrollen. When the page isn't scrolled, the selection is working fine. When the page is scrolled, the selection box is starting from the beginning of the page and looks it doesn't handled the offset since the scrolling event.

Collectives™ on Stack Overflow

jQuery selectable and disable inputs in selected table cells

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related