Question

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

希望有人可以帮助我。

亲切的问候。

Answer 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

中的实时样本

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

1 个答案: