views:

216

answers:

1

Hello,

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

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')
karim79