enabling a button when checkbox is checked?

Question

I have a scenario on my UI where I need to enable a text box and a button on checking a checkbox and disable both text box and the button when the checkbox is un-checked. Below is the screenshot of what I have:

Below is the code in my jsp:

<tr>
    <td>
    <stripes:checkbox name="locationselect" onclick="handleDisable(document.forms['dealerTransactionForm'].elements['locationselect'],document.forms['dealerTransactionForm'].elements['locationId'])"/>
    <stripes:label for="locationId"/>
    </td>
    <td>
    <stripes:text name="locationId" />
    <fmt:message var="tooltip" key="/DealerTransactionReport.action.lookUpLocation"/>
    <stripes:submit name="lookUpLocation" class="button" title="${tooltip}" style="width: auto"/>
    </td>
</tr>

Below is the handleDisable function which I wrote:

function handleDisable(checkbox, item) {
    if(checkbox.checked == true)
        item.disabled = false;
    else
        item.disabled = true;
}

Currently I'm able to enable only the text box when the checkbox is checked, what change should i make so as to enable both the text box and the button?.

You need to pass in a third parameter to the function for your button. You are only passing in the checkbox and the text box. But no button. — user1289451, Oct 21 '16 at 18:26
Possible duplicate of [How to disable/enable a button with a checkbox if checked](http://stackoverflow.com/questions/18110865/how-to-disable-enable-a-button-with-a-checkbox-if-checked) — Ronen Ness, Oct 21 '16 at 18:26
Not an answer but you could just pass `this` as the first parameter to `handleDisable`. Also, in my opinion the argument list is too wordy. Why not pass in the names of the inputs instead. Like this: `handleDisable(this, 'locationId')`. You would still have to hardcode the form's name. Or you could pass it in as a third parameter. Maybe like this: `handleDisable('dealerTransactionForm', this, 'locationId')` — Cave Johnson, Oct 21 '16 at 18:33

Ibrahim Khan · Answer 1 · 2016-10-21T19:06:37.577

Using jQuery you can do it like following.

$('name="locationselect"').change(function() {
    $('name="locationId"').prop('disabled', !this.checked);
});

UPDATE: Since the jQuery tag is removed

<script>
    function handleDisable(elm) {
        document.getElementsByName('locationId')[0].disabled = !elm.checked;
        document.getElementsByName('lookUpLocation')[0].disabled = !elm.checked;
    }
</script>

<input type="checkbox" name="locationselect" onclick="handleDisable(this)" />
<input type="text" name="locationId" disabled>
<input type="submit" value="Submit" name="lookUpLocation" disabled>

`JS` is changed to more easier one. @Newbee – Ibrahim Khan Oct 21 '16 at 19:12 — Ibrahim Khan, Oct 21 '16 at 19:12

user1289451 · Accepted Answer · 2016-10-21T19:16:03.940

You need to pass in a third parameter to the function for your button. You are only passing in the checkbox and the text box.

HTML:

<stripes:checkbox name="locationselect" onclick="handleDisable(document.forms['dealerTransactionForm'].elements['locationselect'],document.forms['dealerTransactionForm'].elements['locationId'], document.forms['dealerTransactionForm'].elements['lookUpLocation'])"/>

JavaScript:

function handleDisable(checkbox, text, button)
    {
          if(checkbox.checked == true) {
             text.disabled = false;
             button.disabled = false;
          }
          else {
             text.disabled = true;
             button.disabled = true;
          }
    }

But that makes the html too busy, in my opinion. I would opt for something like this.

HTML:

<stripes:checkbox name="locationselect" onclick="handleDisable(this)"/>

JavaScript:

function handleDisable(checkbox)
    {             
          var text = document.getElementsByName("locationId")[0]
          var button = document.getElementsByName("lookupLocation")[0]

          if(checkbox.checked == true) {
             text.disabled = false;
             button.disabled = false;
          }
          else {
             text.disabled = true;
             button.disabled = true;
          }
    }

I had a typo. Try it now. – user1289451 Oct 21 '16 at 18:45 — user1289451, Oct 21 '16 at 18:45
You should wrap `if..else..` block with braces. – Ibrahim Khan Oct 21 '16 at 19:14 — Ibrahim Khan, Oct 21 '16 at 19:14

enabling a button when checkbox is checked?

2 Answers2