javascript - 根据之前的单选按钮禁用单选按钮

Question

我需要根据之前选择的两个 radio 启用 radio 选项，我已经在 pervious topic 上提问了我尝试使它适应新需求，但没有成功，我也尝试使用 this topic 的答案, 但也不成功...

所以这里有一些关于我需要的更多细节:我从之前的两个 radio 组中的每一个中选择一个 radio ，所以在第三组应该可用(启用)以仅选择与之前的选择相对应的那两个...

第一组:de, en, es, ca(已选)

第二组:de, en (selected), es, ca

第三组:de(禁用)、en(启用)、es(禁用)、ca(启用)

这是我使用的代码:

$(document).ready(function() {
  $('input[name=lang_or]').click(function() {
    $('input[name=lang_tg]').prop('disabled', false);
    $('input[name=lang_tg][value=' + this.value).prop('disabled', 'disabled');
  });
});

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<table>
  <tr>
    <th>Origin language</th>
    <th>Target language</th>
    <th>Language to index first</th>
  </tr>
  <tr>
    <td>
      <label><input type="radio" name="lang_or" value="de">German</label>
      <label><input type="radio" name="lang_or" value="en">English</label>
      <label><input type="radio" name="lang_or" value="ca">Catalan</label>
      <label><input type="radio" name="lang_or" value="es">Spanish</label>
      <label><input type="radio" name="lang_or" value="fr">French</label>
      <label><input type="radio" name="lang_or" value="it">Italian</label>
      <label><input type="radio" name="lang_or" value="pt">Portugues</label>
    </td>
    <td>
      <label><input type="radio" name="lang_tg" value="de">German</label>
      <label><input type="radio" name="lang_tg" value="en">English</label>
      <label><input type="radio" name="lang_tg" value="ca">Catalan</label>
      <label><input type="radio" name="lang_tg" value="es">Spanish</label>
      <label><input type="radio" name="lang_tg" value="fr">French</label>
      <label><input type="radio" name="lang_tg" value="it">Italian</label>
      <label><input type="radio" name="lang_tg" value="pt">Portugues</label>
    </td>
    <td>
      <label><input type="radio" name="language" value="de">German</label>
      <label><input type="radio" name="language" value="en">English</label>
      <label><input type="radio" name="language" value="ca">Catalan</label>
      <label><input type="radio" name="language" value="es">Spanish</label>
      <label><input type="radio" name="language" value="fr">French</label>
      <label><input type="radio" name="language" value="it">Italian</label>
      <label><input type="radio" name="language" value="pt">Portugues</label>
    </td>
  </tr>
</table>

Answer 1

我将您的点击监听器更改为$('input[name^=lang_]').click(function() { 使其成为目标 第一组和第二组单选按钮。

现在在点击监听器中，您可以只检查第一组和第二组单选按钮中选中的那些单选按钮:

$('input[name^=lang_]:checked').each(function() {
   $('input[name=language][value=' + $(this).val() + ']').prop('disabled', false);
});

请看下面的演示:

$(document).ready(function() {

  // initialize all to disabled
  $('input[name=language]').prop('disabled', true);

  // click listener for 1st and 2nd groups
  $('input[name^=lang_]').click(function() {
    // disable all first
    $('input[name=language]').prop('disabled', true);
    // enable currently selected radios
    $('input[name^=lang_]:checked').each(function() {
      $('input[name=language][value=' + $(this).val() + ']').prop('disabled', false);
    });
  });
});

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

<table>
  <tr>
    <th>Origin language</th>
    <th>Target language</th>
    <th>Language to index first</th>
  </tr>
  <tr>
    <td>
      <label><input type="radio" name="lang_or" value="de">German</label>
      <label><input type="radio" name="lang_or" value="en">English</label>
      <label><input type="radio" name="lang_or" value="ca">Catalan</label>
      <label><input type="radio" name="lang_or" value="es">Spanish</label>
      <label><input type="radio" name="lang_or" value="fr">French</label>
      <label><input type="radio" name="lang_or" value="it">Italian</label>
      <label><input type="radio" name="lang_or" value="pt">Portugues</label>
    </td>
    <td>
      <label><input type="radio" name="lang_tg" value="de">German</label>
      <label><input type="radio" name="lang_tg" value="en">English</label>
      <label><input type="radio" name="lang_tg" value="ca">Catalan</label>
      <label><input type="radio" name="lang_tg" value="es">Spanish</label>
      <label><input type="radio" name="lang_tg" value="fr">French</label>
      <label><input type="radio" name="lang_tg" value="it">Italian</label>
      <label><input type="radio" name="lang_tg" value="pt">Portugues</label>
    </td>
    <td>
      <label><input type="radio" name="language" value="de">German</label>
      <label><input type="radio" name="language" value="en">English</label>
      <label><input type="radio" name="language" value="ca">Catalan</label>
      <label><input type="radio" name="language" value="es">Spanish</label>
      <label><input type="radio" name="language" value="fr">French</label>
      <label><input type="radio" name="language" value="it">Italian</label>
      <label><input type="radio" name="language" value="pt">Portugues</label>
    </td>
  </tr>
</table>