Выбор jQuery и отключение ввода в выбранных ячейках таблицы

Question

Выбор jQuery и отключение ввода в выбранных ячейках таблицы

0

Я немного новичок в jQuery и пробую несколько часов и дней, чтобы получить что-то простое. Я использую таблицу с каждой ячейкой в поле ввода. Я выбрал вариант jQuery для выбора нескольких строк и столбцов.

Я хочу, чтобы после того, как выбор сделан, вход в выбранные ячейки должен быть отключен.

С помощью следующего кода все входы в таблице будут отключены не только для выбранных.

<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>

Надеюсь, кто-то здесь может мне помочь.

С уважением.

Ruald Ordelman 24 май 2014, в 21:18

Источник

Теги:

javascript

jquery

jquery-ui

jquery-plugins

1 ответ

Ещё вопросы

Majid Akbari · Accepted Answer · 2014-05-24T17-07-00.000Z

Измените свой JavaScript на:

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

проверьте живой образец в jsfiddle

Хорошо, спасибо за помощь. Единственное, что осталось сейчас, это прокрутка. Когда страница не прокручивается, выбор работает нормально. Когда страница прокручивается, поле выбора начинается с начала страницы и выглядит так, что оно не обработало смещение с момента события прокрутки.