复选框上的反应仅适用一次。哪里不对？

I am making the form where checkbox controls view of the radiobuttons in the row with this checkbox. The problem that it works only once.

我正在制作表格,其中复选框使用此复选框控制行中单选按钮的视图。它只能工作一次的问题。

Please advise what can be wrong.

请告知可能出错的地方。

The code of the page is following:

该页面的代码如下:

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

1 个解决方案

#1

You only need one click handler for your checkboxes, and within that handler you can test whether the clicked checkbox has been checked or unchecked and act accordingly. This should solve your problem (tested):

您只需要一个单击处理程序用于复选框,并且在该处理程序中,您可以测试单击的复选框是已选中还是未选中,并相应地执行操作。这应该可以解决您的问题(已测试):

$(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);
    })
});

Also, I've shortened it a bit by replacing this:

另外,我通过替换它缩短了一点:

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

with this:

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

1 个解决方案

#1

更多相关文章

随机推荐