jQuery可选择并禁用选定表单元格中的输入

Question

I a little bit new on jQuery and trying for several hours and days to get something simple working. 我对jQuery有点陌生，并尝试了几个小时和几天来获得一些简单的工作。 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. 我已经实现了jQuery的selectable选项来选择多个行和列。

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. 亲切的问候。

Answer 1

Change your JavaScript to : 将您的JavaScript更改为：

$(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 检查jsfiddle中的实时示例

jQuery可选择并禁用选定表单元格中的输入

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-05-24 19:13:48

jQuery可选择并禁用选定表单元格中的输入

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-05-24 19:13:48

解决方案1
1 已采纳 2014-05-24 19:13:48