根据之前的单选选项禁用单选按钮答案

【问题标题】：Disable radio button based on previous radio selection根据之前的单选选项禁用单选按钮
【发布时间】：2018-01-27 08:20:19
【问题描述】：

我需要根据之前选择的两个收音机启用收音机选项，我已经在pervious topic 上提出了一个问题，但我尝试使其适应新需求但未成功，我还尝试使用this topic 的答案，但也未成功...

所以这里有一些关于我需要的更多详细信息：我从之前的两个无线电组中的每一个中选择一个无线电，因此在第三组应该可用（启用）以仅选择与先前选择相对应的两个...

第一组：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>

【问题讨论】：

好吧，只需点击一下即可$('input[name=lang_tg][value=' + this.value) 缺少选择器的结尾部分。

标签： javascript jquery forms jquery-selectors radio-button

【解决方案1】：

我将您的 click listener 更改为 $('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>

【讨论】：

非常感谢，我刚刚添加了您的功能，因为如果我编辑前一个功能，我将无法禁用第二组的重合单选按钮。

【解决方案2】：

您可以获取前两个输入组的值数组，并检查第三组的每个输入是否其值在数组中，如果不是则禁用它。

var i = $('input[name="language"]');
i.prop('disabled', true)

$("input[type='radio']").click(function() {
  var val = $('input[name=lang_or]:checked, input[name=lang_tg]:checked').map(function() {
    return $(this).val()
  }).get()

  i.each(function() {
    $(this).prop('disabled', !val.includes($(this).val()))
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

【讨论】：

【解决方案3】：

你说：

我从之前的两个广播组中各选择一个广播，所以在第三组应该可用（启用）以仅选择那些对应之前的选择...

第一个单选按钮可供选择。所以你不能以这种方式检查一种以上的语言..

如果你想只选择一个，那就用收音机吧..

我也对你的js做了一些改动，看看： https://jsfiddle.net/eb7u4zu8/1/

HTML：

<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 class='thirdGroup'>
<label><input type="checkbox" name="language" value="de">German</label>
<label><input type="checkbox" name="language" value="en">English</label>
<label><input type="checkbox" name="language" value="ca">Catalan</label>
<label><input type="checkbox" name="language" value="es">Spanish</label>
<label><input type="checkbox" name="language" value="fr">French</label>
<label><input type="checkbox" name="language" value="it">Italian</label>
<label><input type="checkbox" name="language" value="pt">Portugues</label>
</td></tr>
</table>

JS：

$( document ).ready(function() {

    $('input[name=language]').attr("disabled", true);

  $('input[name=lang_or]').change(function(){
    enableDisable($("input[name=lang_or]:checked").val(),   $("input[name=lang_tg]:checked").val());
  });

  $('input[name=lang_tg]').change(function(){
    enableDisable($("input[name=lang_or]:checked").val(),   $("input[name=lang_tg]:checked").val());
  });


});

function enableDisable(lang_or, lang_tg){
    if($('input[name=lang_or]').is(":checked") && $('input[name=lang_tg]').is(":checked")){
    $('input[name=language]').attr("disabled", true).prop('checked', false);

        $("input[name=language][value="+lang_or+"]").prop('checked', true).attr("disabled", false);
    $("input[name=language][value="+lang_tg+"]").prop('checked', true).attr("disabled", false);
  }else{
    $('input[name=language]').attr("disable", true);
  }
}

【讨论】：

谢谢，它也可以，但对用户来说不是那么直观，我将复选框更改为单选，以便只能选择第三组中的一个，它会自动选择等于的语言到第二组。而且我还需要保留我在上一个线程中提到的功能stackoverflow.com/questions/45740772/…