0

I have an array of list boxes. I need them to become disabled if the first one is checked (with an id of disabler_0), and I need them to be enabled if that box is unchecked. Right now it doesn't work. I know I'm close, but I can't figure it out! Thanks for any help.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
    $('#disabler_0').change(function()
    {
      $('[name*=form1]').not("#disabler_0").attr('disabled', 'disabled')
    });

});
</script>

HTML

<body>

<div class="container">
  <div class="header"><a href="#">
    <!-- end .header --></div>
  <div class="content">
    <h1>Instructions</h1>
    <form id="form1" name="form1" method="post" action="">
      <p>
        <label>
          <input type="checkbox" name="disabler" value="one" id="disabler_0" />
          one</label>
        <br />
        <label>
          <input type="checkbox" name="disabler" value="two" id="disabler_1" />
          two</label>
        <br />
        <label>
          <input type="checkbox" name="disabler" value="three" id="disabler_2" />
          three</label>
        <br />
        <label>
          <input type="checkbox" name="disabler" value="four" id="disabler_3" />
          four</label>
        <br />
        <label>
          <input type="checkbox" name="disabler" value="five" id="disabler_4" />
          five</label>
        <br />
      </p>
    </form>
    <p>&nbsp;</p>
    <!-- end .content --></div>
  <div class="footer">
    <p>Footer</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>
2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by twiss
0

The problem is, that with .not(), you don't select children (which is what you want), but the elements you selected before (with [name*=form1], in this case). Also, it's more logical to use the id of the form to select it. The last thing is that, if you click the checkbox again, everything would remain disabled.

$(function()
{
  $('#disabler_0').click(function()
  {
    $('#form1 :not(#disabler_0)').attr('disabled', $('#disabler_0').is(':checked'));
  });
});

Edited by twiss: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.