CODEWITHSUNDEEP
jquery
Geo Thomas
Geo Thomas

Reputation: 1159

how do I enable a button if the option value inside a select tag is changed

I have a table in which there is a save button on each row.By default I keep all the save buttons disabled.What i am trying to do is to enable only the save button in a row if there is any change in the value inside the select tag.

My table would be

<tr>
   <td id = "tst">${userId}</td>
   <td>${applicationId}</td>
   <td>${.firstName}</td>
   <td>${username}</td>
   <td class ="st" >
   <select id="roles" >
      <option value='Consumer'>Consumer</option>
      <option value='Contributor'>Contributor</option>
      <option value='Collaborator'>Collaborator</option>
      <option value='Coordinator'>Coordinator</option>
      <option value='Administrator'>Administrator</option>
    </select></td>
    <td style="width:90px">
    <div id = "usr_role" >
      <button  id = "${userId}" type="button" class="btn btn-xs btn-primary"  disabled >Save</button>
    </div>
    </td>

</tr>

I have tried to check if the select value is changed using a function as follows:

 $("select").on('change' , function()
            {
             $('button ').prop('disabled', false);
                alert('select changed');
            });

This doesn't seem to be working ......can anybody suggest a better approach

Upvotes: 0

Views: 165

Answers (3)

priya786
priya786

Reputation: 1834

 $("select").on('change' , function()
            {
             $('.btn-primary').each(function(){
                          $(this).prop('disabled', true);           
                                    });
             var id=$(this).attr('title');
             $('button#id'+id).prop('disabled', false);
                alert('select changed');
            });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<tr>
   <td id = "tst">${userId}</td>
   <td>${applicationId}</td>
   <td>${.firstName}</td>
   <td>${username}</td>
   <td class ="st" >
   <select id="roles" title="1">
      <option value='Consumer'>Consumer</option>
      <option value='Contributor'>Contributor</option>
      <option value='Collaborator'>Collaborator</option>
      <option value='Coordinator'>Coordinator</option>
      <option value='Administrator'>Administrator</option>
    </select></td>
    <td style="width:90px">
    <div id = "usr_role" >
      <button  id = "id1" type="button" class="btn btn-xs btn-primary"  disabled >Save</button>
    </div>
    </td>

</tr>
<tr>
   <td id = "tst">${userId}</td>
   <td>${applicationId}</td>
   <td>${.firstName}</td>
   <td>${username}</td>
   <td class ="st" >
   <select id="roles" title="2">
      <option value='Consumer'>Consumer</option>
      <option value='Contributor'>Contributor</option>
      <option value='Collaborator'>Collaborator</option>
      <option value='Coordinator'>Coordinator</option>
      <option value='Administrator'>Administrator</option>
    </select></td>
    <td style="width:90px">
    <div id = "usr_role" >
      <button  id = "id2" type="button" class="btn btn-xs btn-primary"  disabled >Save</button>
    </div>
    </td>

</tr>

Please try this it may help you

Upvotes: 1

jogesh_pi
jogesh_pi

Reputation: 9782

Do it like this, apply change event on every select box that are exists in table. Then find the row in basis of select box with the help of closest(), and change the button property that exists on the same row.

$('table tr').on('change', 'select', function() {
    var _parent = $(this).closest('tr');

    $('button', _parent).prop('disabled', false);
    alert('done');
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You need to find the tr of the select and then the button inside it

$("select").one('change', function () {
    $(this).closest('tr').find('button').prop('disabled', false);
});

If you have dynamically added rows

$(document).on('change', 'select', function () {
    $(this).closest('tr').find('button').prop('disabled', false);
});

Upvotes: 1

Related Questions