チェックボックスをオンにするとボタンを有効にしますか？

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

Answer 2

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>