Question

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

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

第一组：de，en，es，ca（已选定）

第二组：de，en（已选中），es，ca

第三组：de（已禁用），en（已启用），es（已禁用），已启用（已启用）

以下是我正在使用的代码：

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

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

你说：

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

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

如果你想选择只有一个，而不是使用收音机..

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

根据以前的无线电选择禁用单选按钮

3 个答案: