javascript - 选中复选框时启用按钮？

Question

我的 UI 上有一个场景，我需要在选中复选框时启用文本框和按钮，并在取消选中复选框时禁用文本框和按钮。下面是我的截图:

下面是我的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>

下面是我写的handleDisable函数:

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

目前我只能在选中复选框时启用文本框，我应该做些什么更改才能同时启用文本框和按钮？

Answer 1

您需要将第三个参数传递给按钮的函数。您只传递复选框和文本框。

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;
          }
    }

但在我看来，这使得 html 太忙了。我会选择这样的东西。

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;
          }
    }