CODEWITHSUNDEEP
javascripthtml
MoteCL
MoteCL

Reputation: 228

Enabled checkbox

I have the following code where I ask if the tool is occupied, if thar tool is occupied the checkbox is disabled otherwise the enabled.

But I have a javascripts where I can change the tool with the library /x-editable and when I change the tools in my success function I want the checkbox of that row get enabled. I have a code but what this does is enabled all the checkbox.

var tools = [];
        $.each({
            "tools1": "tools1",
            "tools2": "tools2",
            "tools3": "tools3",
            "tools4": "tools4"
        }, function(k, v) { tools.push({value: k, text: v});
        });

$('#table').editable({
        container: 'body',
        selector: 'td.Tools',
        title: 'new Tools',
        source: tools,
        showbuttons: false,
        success: function(response) {
          
        $('.form-check-input').closest('tr').find('input[name=choose]').attr('disabled', false);

        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<table id="table" class="table table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Id
            </th>
            <th>Tools
            </th>
            <th>
            </th>
        </tr>
    </thead>
    <tbody>
      <tr>
        <td data-name="id" class="id" data-type="text"> 
          2
        </td>
        <td data-name="Tools" class="editable Tools" data-type="select">
          Tools1
        </td>
        <td>
          <input type="checkbox" name="choose" id="btn1" class="form-check-input" data-toggle="tooltip" disabled>Choose
        </td>
      </tr>
      <tr>
       <td data-name="id" class="id" data-type="text"> 
          1
        </td>
        <td data-name="Tools" class="editable Tools" data-type="select">
         Tools3
        </td>
        <td>
          <input type="checkbox" name="choose" id="btn2" class="form-check-input" data-toggle="tooltip" disabled>Choose
        </td>
      </tr>
      <tr>
          <td data-name="id" class="id" data-type="text"> 
          3
        </td>
        <td data-name="Tools" class="editable Tools" data-type="select">
         Tools4
        </td>
        <td>
          <input type="checkbox" name="choose" id="btn3" class="form-check-input" data-toggle="tooltip">Choose
        </td>
      </tr>
    </tbody>
</table>

I hope I explained well

Upvotes: 0

Views: 53

Answers (1)

full-stack
full-stack

Reputation: 553

$('.form-check-input').closest('tr').find('input[name=choose]').attr('disabled', false);

This line of code is enabling the closest checkbox to each element with a class of form-check-input

if you would like to enable just the checkbox of what you are dealing with you should do something like $(this).closest('tr').find('input[name=choose]').attr('disabled', false);

Hope this helps

Upvotes: 2

Related Questions