Question

0

227

Views

How to disable/enable input when user select dropdown

I'm using DataTables 1.10.16, What I'm trying to achieve is to disable/enable input when user select dropdown.

eg. When user select 0, then disable the input. When other options is selected, enable the input.

please check the code below.

 { "targets": [OPTIONS], "orderable": false,
            "render": function (data, type, row) {
                var optionsCombo ='<select class="form-control OPTIONS_DATA" name="OPTIONS_DATA" style="width: 150px;"> ';
        
                for(var i = 0; i<data.length; i++){
                    optionsCombo += `<option value='${data[i].options_code}' >${data[i].options_desc}</option>`;
                }
                optionsCombo += '</select>';
                return optionsCombo ;
       } 
},
{ "targets": [DETAILS], "orderable": false,
            "render": function (data, type, row) {
                return `<input class="form-control DETAILS" name="DETAILS" type="number" maxlength="2" style="" value = ${data}>`;
              } 
            }

rendered HTML code:

<select class="form-control OPTIONS_DATA options0" name="OPTIONS_DATA" style="width: 150px;"> 
<option value="0">0</option>
<option value="1" selected="selected">1</option>

<input class="form-control DETAILS detailsRow0" name="DETAILS" " type="number" maxlength="2" >

now I'm able to disable the input by putting the following code in createdRow event.

$(row).find('input').attr('readonly', 'true');

I also follow the solution posted on this link but it doesn't work for me.

I also use this function. It works when I put it on chrome console but when I put it inside js file, I'm not able to disable/enable the input.

 $('#example select.form-control.OPTIONS.options0').change(function() {
        if( $(this).val() == 1) {
                $('#example input.detailsRow0').prop( "disabled", false );
        } else {       
        $('#example input.detailsRow0').prop( "disabled", true );
        }
    });

any suggestions would be appreciated.

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T04:01:33.690Z

Just by the image posted on OP, I saw why there might be difficulty. Tags that are in table cells are hard to grasp in the beginning. Normally, in a layout, when traversing the DOM it's easy because nested tags where accessible and most referencing originated from document.

Tables on the otherhand, are clusterred and each individual cell and it's contents are isolated because HTML tables are heavily row oriented -- <tr> are added/removed, they hold all of the cells in order, etc. yet they are invisible.

Here are some things to keep in mind:

99% of the time form controls require user interaction.
- Consider a form event (ex. input, change, submit, reset, etc)
- The origin tag (ie the element the user interacted with like clicked, changed, hovered over, etc) can be referenced using event.target or this (jQuery $(this)) within the event handler (ie the function used when a watched event triggers.)
- If your e.target or this is in a table cell, then it's more than likely you want to access another tag that's in the same row. Start your traversal from this:
  - this goes up to the cell it's in
```
 <td>
 🠉 <select> // $(this).parent('td')
 </td>
```
  - Now think from the cell's perspective it needs to go to the next cell and down into the cell to .find() the input.
```
      🠊
<td></td> 🠋 <td>
            <input>  // .next('td').find('input');
           </td>   
```

$('select').on('change', switchFields);

function switchFields(e) {
  const input = $(this).parent('td').next('td').find('input');

  if ($(this).val() === "0") {
    input.prop('disabled', true);
  } else {
    input.prop('disabled', false);
  }
};

<table>
<tbody>
<tr><td><select>
          <option default></option>
          <option value=0>OFF</option>
          <option value=1>ON</option>
         </select></td><td><input></td></tr>
<tr><td><select>
          <option default></option>
          <option value=0>OFF</option>
          <option value=1>ON</option>
         </select></td><td><input></td></tr>
<tr><td><select>
          <option default></option>
          <option value=0>OFF</option>
          <option value=1>ON</option>
         </select></td><td><input></td></tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

0

227

How to disable/enable input when user select dropdown

1 answers

0

Find remote jobs

Andres GPT