jQuery 可选择和禁用选定表格单元格中的输入答案

【问题标题】：jQuery selectable and disable inputs in selected table cellsjQuery 可选择和禁用选定表格单元格中的输入
【发布时间】：2014-05-25 03:13:48
【问题描述】：

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

希望这里有人可以帮助我。

亲切的问候。

【问题讨论】：

标签： javascript jquery jquery-ui jquery-plugins

【解决方案1】：

将您的 JavaScript 更改为：

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

查看jsfiddle中的实时样本

【讨论】：

很好，感谢您帮助我。现在唯一剩下的就是scrollen了。当页面不滚动时，选择工作正常。当页面滚动时，选择框从页面的开头开始，看起来它没有处理自滚动事件以来的偏移量。