显示/隐藏下拉菜单，取决于单选按钮选择-jQuery

Question

我制作了一个带有2个单选按钮和2个下拉菜单的表单，可以正常工作。 但是我现在添加了另外2个单选按钮和2个其他下拉菜单（我没有更改jquery），所以它不起作用。

我已将其上传到jsfiddle： http : //jsfiddle.net/qbawh/

为了使单选按钮和下拉菜单正常工作，我需要在jquery中进行哪些更改。

表格应该做的是：如果在1上选择'否'，我希望下拉列表显示为灰色。 如果选择“是”，则用户可以从下拉菜单中进行选择。 我要两个都独立工作。

Answer 1

在html中，当单选按钮具有相同的name属性时，它们将作为一个组工作。 因此，通过为所有四个单选按钮提供相同的name ，可以将它们设置为一个组（因此，单击这四个按钮中的任何一个将取消选择先前选择的按钮）。 要解决此问题，只需给第二个“是/否”按钮指定其他name 。 假设您的选择元素具有名称“ colour1”和“ colour2”，您可能希望将第一个“是/否”单选重命名为“ discount1”，第二个设置为“ discount2”。

然后更新您的jQuery代码，以使用为第二组无线电指定的新name 。

小提琴中的html是无效的，因为您有不属于表的tr和td元素，但是从一般意义上讲，如果您可以将前两个无线电及其关联的select元素放在同一个父容器中（是否tr或div之类的东西），可以简化编写简单jQuery代码的过程。

例如，如果您将html修复为在单个表格行中包含收音机和其相关选择，则可以为所有收音机（即使它们位于不同的组中）分配一个.click()处理函数，以启用/通过使用jQuery查找属于同一父行的元素，仅禁用同一表行中的选择元素：

$('input[name^="discount"]').click(function() {
   $(this).closest('tr').find('select').prop('disabled', this.value=='No');
});

这使用以选择器开头的^=属性在所有以“折扣”开头的名称上输入.click处理程序。 单击后，它将找到closet父级tr元素，并获取该行中的所有select元素并禁用/启用它们。

Answer 2

首先，您必须更改第二个单选按钮组的名称，即所有单选按钮的名称。 现在是下拉菜单：

$(document).ready(function(){
    $('input[type="radio"]').change(function(){
       if($(this).val()=='No'){
          if($(this).attr('name')=='discount'){
             $('#colour1,#shade1').attr('disabled',true);
          } else{
             $('#colour2,#shade2').attr('disabled',true);
          }
       } else {
          if($(this).attr('name')=='discount'){
             $('#colour1,#shade1').removeAttr('disabled');
          } else{
             $('#colour2,#shade2').removeAttr('disabled');
          }
       }
    });
});

这是为了不更改HTML。 对不起，我的英语不好

Answer 3

如果要分别分组，请为单选按钮指定不同的名称。 相应地更改validate方法中的代码。

我已经解决了您在提琴中遇到的问题。

演示版