Question

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

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

我需要在jquery中更改单选按钮和下拉列表才能工作。

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

Answer 1

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

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

你的小提琴中的html是无效的，因为你有tr和td元素不属于一个表，但在一般意义上你是否可以把前两个无线电及其相关的选择元素放在同一个父容器中（无论是tr还是div或其他东西）它使得编写简单的jQuery代码变得更容易。

例如，如果您修复html以使无线电及其相关选择位于同一表格行中，则可以为所有无线电分配单个.click()处理程序（即使它们位于不同的组中，通过使用jQuery查找属于同一父行的那些，只启用/禁用同一表行中的select元素：

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

这使用^= attribute starts with selector在所有输入上放置.click处理程序，名称以“discount”开头。单击时，它将找到closet parent 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方法中的代码。

我已经在小提琴中解决了你的问题。看看。

<强> Demo

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

3 个答案: