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

Question

我需要根据之前的两个 selected 收音机启用收音机选项，我已经在 and I tried unsuccessfully to adapt it to the new need, and I also tried using the answer to this topic上提问了，但也没有成功...

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

第一组：de, en, es, ca (selected)

第二组: 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

我将您的 click listener 更改为 $('input[name^=lang_]').click(function() { 以 target 第一组和第二组单选按钮。

现在在你的click listener里面，你可以只勾选第一组和第二组单选按钮中那些个勾选的单选按钮:

$('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>

Answer 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>

Answer 3

你说：

I select one radio from each of two previous radio groups, so at the third group should be available (enabled) to pick only those two which correspond to the previous selection...

第一个单选按钮用于单选。所以你不能用这种方式检查超过一种语言..

如果你想选择只有一个，而不是使用无线电..

我也对你的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);
  }
}

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

Disable radio button based on previous radio selection

javascript

forms

jquery

jquery-selectors

radio-button