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

Posted

技术标签:

【中文标题】根据之前的单选选项禁用单选按钮【英文标题】：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) 缺少选择器的结尾部分。 【参考方案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);

【讨论】：

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

以上是关于根据之前的单选选项禁用单选按钮的主要内容，如果未能解决你的问题，请参考以下文章

禁用分组单选操作按钮中的单个单选选项

如何根据淘汰赛js中的单选按钮选择填充文本框

使用 jquery 检查禁用的单选按钮

在选中的单选按钮上启用/禁用 RadDatePicker

如何更改禁用的单选按钮/复选框上的丑陋光标图像

iphone中的单选按钮