Clever Geek Handbook

The checkbox response only works once. What's wrong?

I am making a form where a checkbox controls the view by radio buttons on the row with this checkbox. The problem is, it only works once.

Please advise what might be wrong.

The page code looks like this:

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


source to share


1 answer


You only need one click handler for your checkboxes, and inside that handler, you can check if the checkbox was 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 this a bit by replacing this:



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

with this:

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


source






More articles:


All Articles