skip to Main Content

I have this hbs code:

<table>
  <tr>
    <th>A</th>
    <th>B</th>    
  </tr>
  {{#each data2}}
  <tr>
    <td>
      <input
      type='checkbox'
      id='nm_produk'
      class='product'
      name='data_{{no}}'
      value="{{no}}">
      <label>{{item}}</label>
    </td>
    <td>
      <input
      disabled type='text'
      placeholder='0'
      name='data_{{no}}'
      id='qtytbs'>
    </td>
  </tr>
  {{/each}}
</table>

And this script:

$(document).ready(function() {
    $(".product").change(function() {
        $next = $(this).closest('tr').find('[id=qtytb]');
        $next.prop('disabled', !this.checked);   
    });
});

When I checked the check box, the same row of input element are enabled, and we can write the text on it.
But when I unchecked the checkbox, the value is still exist the last value.
I want to get blank value and disabled on the input element at the same row when I unchecked the checkbox element.

How can I achieve this?

2

Answers


  1. Add $next.val(”); to your code only when checkbox is disabled.You might need to write an if condition to set the empty value..

    Login or Signup to reply.
  2. Change your JS code to:

    $(document).ready(function() {
        $("#nm_produk").change(function() {
            $next = $(this).closest('tr').find('[id=qtytbs]');
            $next.val("");
            $next.prop('disabled', !this.checked);   
        });
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search