选中复选框时启用按钮？

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

使用jQuery，你可以像下面这样做。

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

UPDATE：由于删除了jQuery标记

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

Answer 2

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

HTML：

var query = ctx.Filters.Where(x => x.SessionId == id)
    .Join(ctx.Items, i => i.ItemId, fs => fs.Id, (f, fs) => fs);

query.Select(x => x.ItemNav1).Load();
query.Select(x => x.ItemNav2).Load();
query.Select(x => x.ItemNav3).Load();
query.Select(x => x.ItemNav4).Load();
query.Select(x => x.ItemNav5).Load();
query.Select(x => x.ItemNav6).Load();

var result = query.ToList();
// here all the navigation properties should be populated 

JavaScript的：

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

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

HTML：

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

JavaScript的：

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