Question

<input type="radio" id="checkMain" />
<input type="radio" id="checkMain1" />
<input type="radio" id="checkMain2" />

$(function()
   {
    $("input[id=checkMain]").click(function () {
        var otherCks = $("input[id^=checkMain]").not(this);
        if (!$(this).is(":checked")) {
            $(".child").attr("disabled", true);
            otherCks.removeAttr("disabled");
        } else {
            $(".child").removeAttr("disabled");
            otherCks.attr("disabled", true)
        }
    });
    $("#chk_all").click(function() {
        var checked_status = this.checked;
        $("input[id^=chk]").each(function () {
            this.checked = checked_status;
        });
    });
});

$(function()
    {
     $("input[id=checkMain1]").click(function () {
         var otherCks = $("input[id^=checkMain]").not(this);
         if (!$(this).is(":checked")) {
             $(".child,.child1").attr("disabled", true);
             otherCks.removeAttr("disabled");
         } else {
             $(".child,.child1").removeAttr("disabled");
              otherCks.attr("disabled", true)
         }
     });
     $("#chk_all").click(function() {
         var checked_status = this.checked;
         $("input[id^=chk]").each(function () {
             this.checked = checked_status;
         });
     });
 });


$(function()
     {
      $("input[id=checkMain2]").click(function () {
          var otherCks = $("input[id^=checkMain]").not(this);
          if (!$(this).is(":checked")) {
              $(".child,.child1").attr("disabled", true);
              otherCks.removeAttr("disabled");
          } else {
              $(".child,.child1").removeAttr("disabled");
              otherCks.attr("disabled", true)
          }
      });
      $("#chk_all").click(function() {
          var checked_status = this.checked;
          $("input[id^=chk]").each(function () {
              this.checked = checked_status;
          });
      });
  });

http://jsfiddle.net/harshilshah/sBgZw/23

中的示例代码

以上代码适用于复选框，但适用于单选按钮

简而言之，工作应该是这样的：当我点击radiobutton1时，其他人应该被禁用（不可用）。当我重新点击radiobutton1时，其他人应该再次可用。

Answer 1

你的小提琴和上面的代码不匹配，但小提琴本身完美无缺（对于复选框）。

对于无线电，这种替代也有效。

<input type="radio" id="chkMain" name="chkMain"/>
<input type="radio" id="chkMain1" name="chkMain" />
<input type="radio" id="chkMain2" name="chkMain" />
<input class="child" type="radio" name="chkChild" id="chk1" disabled="true" />
<input class="child" type="radio" name="chkChild" id="chk2" disabled="true" />
<input class="child" type="radio" name="chkChild" id="chk3" disabled="true" />
<input class="child" type="radio" name="chkChild" id="chk4" disabled="true" />
<input class="child" type="radio" name="chkChild" id="chk5" disabled="true" />
<input class="child" type="radio" name="chkChild" id="chk6" disabled="true" />
<input class="child" type="radio" name="chkChild" id="chk7" disabled="true" />

然而，显然，一旦你禁用其他单选按钮，就无法“取消全部选择”或“选择另一个” - 通常不会。

如果您使用此代码标记带有假类的单选按钮，则可以切换按钮（使用上面的html代码）

$("input[id^='chkMain']").click(function() {
    if ($(this).hasClass('checked')) {
        $(this).attr("checked",false);
        $(this).removeClass('checked');
    }
    else {
        $(this).addClass('checked');
    }
   $("input[id^='chkMain']").not(this).attr("disabled", $(this).is(":checked"));
    $(".child").attr("disabled", !$(this).is(":checked"));
});

修改

看看

http://jsfiddle.net/sBgZw/25/（再次点击以启用所有无线电）或

http://jsfiddle.net/sBgZw/26/（点击所选广播以“取消全选”）

Answer 2

您无需为每个元素（DRY）重复代码。只是做：

$(function() {
    $("input[id^=checkMain]").click(function () {
        var otherCks = $("input[id^=checkMain]").not(this);
        if (!$(this).is(":checked")) {
            $(this).attr("disabled", true);
            otherCks.removeAttr("disabled");
        } else {
            $(this).removeAttr("disabled");
            otherCks.attr("disabled", true)
        }
    });
});

在您的代码中，您有$(".child").attr("disabled", true);但元素没有类child。只需将其替换为this，无论如何都更有意义（参见上面的代码）。
~~即使这样，您也无法再更改disabled状态，因为禁用的单选按钮不会收到点击事件。~~请参阅更新。
值得：DEMO。但由于3中提到的原因，它仅适用于第一次。

<强>更新

我现在看到你的目标是什么。问题是再次单击单选按钮不取消选择它。因此每次只会执行else。单击其他单选按钮可取消选中单选按钮。但是如果你禁用其他的，则无法取消选择它。你可以，跟踪选定的状态，否则手动取消选择它，但值得努力吗？

你为什么要这样做？对用户来说似乎是一个不必要的障碍。

点击后单选按钮不会被禁用

2 个答案: