Question

我正在使用复选框控制行中的radiobuttons视图的复选框。问题是它只能工作一次。

请告知可能出现的问题。

页面代码如下：

<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

    $(document).ready(function(){
        $("label input:checkbox:not(:checked)")
            .parent().parent().parent()
            .find(":radio")
            .attr('checked',false)
            .attr('disabled',true);

        $("label input:checkbox:not(:checked)").click(function(){
            $(this).parent().parent().parent()
            .find(":radio")
            .attr('disabled',false);
            return true;
        })

        $("label input:checkbox:checked").click(function(){
            $(this).parent().parent().parent()
            .find(":radio")
            .attr('checked',false)
            .attr('disabled',true);
            return true;
        })

        $("#clear-first").click(function(){
            $("input[name='first']").attr('checked',false);
        })

        $("#clear-second").click(function(){
            $("input[name='second']").attr('checked',false);
        })
    });

    </script>

  </head>
  <body>
      <form>
      <table id="filters-select">
      <thead>
              <tr>
                  <td>filter name</td>
                  <td>first filter</td>
                  <td>second filter</td>
              </tr>
          </thead>
      <tbody>
      <tr>
          <td><label><input type="checkbox" name="first-check" checked="checked" class="filter-checkbox">first row</label></td>
          <td><label><input type="radio" name="first" value="1">value 1 col 1</label></td>
          <td><label><input type="radio" name="second" value="1">value 1 col 2</label></td>
      </tr><tr>
          <td><label><input type="checkbox" name="second-check" class="filter-checkbox">second row</label></td>
          <td><label><input type="radio" name="first" value="2">value 2 col 1</label></td>
          <td><label><input type="radio" name="second" value="2">value 2 col 2</label></td>
      </tr><tr>
          <td><label><input type="checkbox" name="third-check" class="filter-checkbox">third row</label></td>
          <td><label><input type="radio" name="first" value="3">value 3 col 1</label></td>
          <td><label><input type="radio" name="second" value="3">value 3 col 2</label></td>
      </tr>
      <tr>
          <td></td>
          <td><a id="clear-first">clear</a></td>
          <td><a id="clear-second">clear</a></td>
      </tr>
      </tbody>
      </table>
      </form>
  </body>
</html>

Answer 1

您的复选框只需要一个点击处理程序，在该处理程序中，您可以测试是否已选中或取消选中已点击的复选框并采取相应措施。这应该可以解决您的问题（已测试）：

$(document).ready(function(){
    $("label input:checkbox:not(:checked)")
        .parents('tr')
        .find(':radio')
        .attr('checked',false)
        .attr('disabled',true);

    $("label input:checkbox").click(function(){
        var $radio = $(this).parents('tr')
                            .find(':radio');
        if($(this).is(':checked')) {
            $radio.removeAttr('disabled');
        } else {
            $radio.attr('disabled',true);
        }
        return true;
    });

    $("#clear-first").click(function(){
        $("input[name='first']").attr('checked',false);
    })

    $("#clear-second").click(function(){
        $("input[name='second']").attr('checked',false);
    })
});

另外，我通过替换它来缩短它：

.parent().parent().parent()
            .find(":radio")

用这个：

.parents('tr').find(':radio')

复选框上的反应只能运行一次。怎么了？

1 个答案: