Member Avatar for genzoman

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
  • 159 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by twiss
Member Avatar for twiss

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 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.