对于由变量表示的DOM元素禁用设置形式选择

Question

我正在尝试制作一个表单元素，在这种情况下，选择输入的非活动选项被禁用。作为推荐的解决方案，我在这里遇到了此代码：

$('#elementid option:not(:selected)').prop('disabled', true);

我正在使用变量表示循环中的对象：

var sinput = $(this).parents("tr").find('select');

我的问题是-如何通过代表变量sinput应用道具代码？我什至可以这样做吗？

Answer 1

如果我理解正确，则$（this）必须是事件中的某些对象

您可以重复使用var

var $sinput = $(this).closest("tr").find('select');
$('option:not(:selected)', $sinput).prop('disabled', true);

或

var $sinput = $(this).closest("tr").find('select');
$sinput.find('option:not(:selected)').prop('disabled', true);

我会直接做

$(".dis").on("click", function() {
  $(this).closest("tr")  // the row of the button
    .find('select option:not(:selected)') // all not selected options
    .prop('disabled', true);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><button type="button" class="dis">Disable not selected</button>
      <select>
        <option value="">Please select</option>
        <option value="1">One</option>
        <option value="2" selected>Two</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><button type="button" class="dis">Disable not selected</button>
      <select>
        <option value="">Please select</option>
        <option value="1" selected>One</option>
        <option value="2">Two</option>
      </select>
    </td>
  </tr>
</table>

[如果只想在页面加载时禁用表中所有未选择的选项，则可能是

$(function() { 
 $("#tableId")
   .find('select option:not(:selected)')
   .prop('disabled', true);
});