禁用点击表格td，但激活点击div表格

Question

我有一个包含2列的表（该列中有x行）。 现在有了一个简单的按钮和JS，当启用第1列时，我可以从第1列和第2列进行切换，而第2列则被禁用，反之亦然。

在禁用列上现在有一个灰度层，其属性为：pointer-event：无；阻止用户输入（在该行中，当禁用该列时，不会触发按钮和输入框）。

但是现在我有一个问题，我必须启用该列，同时单击灰色区域，而不仅是使用按钮。 我尝试在行/列中使用div，但无法正常工作。 当我在列中添加div并添加属性时：pointer-events：all;到div时，所有输入框和按钮都是由指针触发的（不正确）。

你有什么主意吗？ （我也可以使用在BlockUI上尝试过的Primefaces，但某些功能无法正常工作）

这是我想要的简单图形示例

Answer 1

$('.right input[type="text"]').on('focus', function() {
  $('.left input[type="text"],.left button').attr('disabled', 'disabled');
  $('.left').addClass('distd');
})

$('.right input[type="text"]').on('blur', function() {
  $('.left input[type="text"],.left button').prop('disabled', false);
  $('.left').removeClass('distd');
})

$('.left input[type="text"]').on('focus', function() {
  $('.right input[type="text"],.right button').attr('disabled', 'disabled');
  $('.right').addClass('distd');
})

$('.left input[type="text"]').on('blur', function() {
  $('.right input[type="text"],.right button').prop('disabled', false);
  $('.right').removeClass('distd');
})

table,
td {
  border: 1px solid black
}

td {
  margin: 5px;
  padding: 5px;
}

.distd {
  background-color: #ddd;
  cursor: not-allowed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="left"><input type="text" /></td>
    <td class="right"><input type="text" /></td>
  </tr>
  <tr>
    <td class="left">
      <input type="text" />
    </td>
    <td class="right">
      <input type="text" />
      <button>sample btn</button>
    </td>
  </tr>
  <tr>
    <td class="left">
      <input type="text" />
    </td>
    <td class="right">
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td class="left">
      <input type="text" />
    </td>
    <td class="right">
      <input type="text" />
    </td>
  </tr>
</table>
<button>sample btn</button>

这就是您需要的方式吗？

-更新-

添加了叠加