jeudi 6 mai 2021

Check,Unckeck Checkbox in each row of table based on Checkbox ID using Jquery

I am trying to check, Uncheck checkbox based on id. I have two column in table.

         *current  paper * arrear paper

if one paper is selected in current that paper should be disabled from arrear paper and if is selected in arrear column that particular paper should be disabled from current paper.

MY FIDDLE : Demo Here

My HTML :

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
           </script>
<table style="width:100%;" id="mytable" border="1">
    <tr>
        <th style="padding:2.5px;" colspan="3" style="text-align:center;">Current 
               Paper</th>
        <th style="padding:2.5px;" colspan="3">Arrear Paper</th>
    </tr>
    <tr>
        <th>P1
            <br/>
            <input type="checkbox" id="selectAll" onclick="SelectAll(this)" />
        </th>
        <th>P2
            <br/>
            <input type="checkbox" id="selectAll" onclick="SelectAll(this)" />
        </th>
        <th>P3
            <br/>
            <input type="checkbox" id="selectAll" onclick="SelectAll(this)" />
        </th>
        <th>P1
            <br/>
            <input type="checkbox" id="selectAll" onclick="SelectAll(this)" />
        </th>
        <th>P2
            <br/>
            <input type="checkbox" id="selectAll" onclick="SelectAll(this)" />
        </th>
        <th>P3
            <br/>
            <input type="checkbox" id="selectAll" onclick="SelectAll(this)" />
        </th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="checkbox" id="P1" class="sum" data- 
                 toggle="checkbox">
        </td>
        <td>
            <input type="checkbox" name="checkbox" id="P2" class="sum"
                        data-toggle="checkbox">
        </td>
        <td>
            <input type="checkbox" name="checkbox" id="P3" class="sum" 
              data-toggle="checkbox">
        </td>
        <td>
            <input class="selectableType" type="checkbox" id=A-P1>
        </td>
        <td>
            <input class="selectableType" type="checkbox" id=A-P2>
        </td>
        <td>
            <input class="selectableType" type="checkbox" id=A-P3>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="checkbox" id="P1" class="sum" 
         data-toggle="checkbox">
        </td>
        <td>
            <input type="checkbox" name="checkbox" id="P2" class="sum" 
              data-toggle="checkbox">
        </td>
        <td>
            <input type="checkbox" name="checkbox" id="P3" class="sum"                                                 
        data-toggle="checkbox">
        </td>
        <td>
            <input class="selectableType" type="checkbox" id=A-P1>
        </td>
        <td>
            <input class="selectableType" type="checkbox" id=A-P2>
        </td>
        <td>
            <input class="selectableType" type="checkbox" id=A-P3>
        </td>
    </tr>
</table>

My Script :

         $('input[type="checkbox"]').change(function() {
         $('input:checkbox:checked').each(function() {
            
          if($(this).is(":checked")){
               var dis='A-'+$(this).attr("id");
               var value= $(this).closest('tr').find('#'+dis);
         value.prop('disabled', true);
           }
    })
    });
    $('input[type="checkbox"]').change(function() {
    $('input:checkbox:checked').each(function() {
          if($(this).is(":not(:checked)")){
               var dis='A-'+$(this).attr("id");
               var value= $(this).closest('tr').find('#'+dis);
                 value.prop('disabled', false);
           }
    })
    });

    function SelectAll(obj) {

      
        var table = $(obj).closest('table');
        var th_s = table.find('th');
        var current_th = $(obj).closest('th');
        var columnIndex = th_s.index(current_th) - 1;
        table.find('td:nth-child(' + (columnIndex) + ') input')
            .prop("checked", obj.checked).change();
    }
     

My Problem is,i can able to disable the arrear paper if that specific paper is selected in current column, but if i uncheck tha selected paper in current column,it does not enable that paper in arrear column. This same problem is in SelectAll Checkbox function also if i click SelectAll in P1 paper,Current Column i want to disable that column in P1 paer,Arrear Column

Can Anyone Please Guide Me to Overcome this issue. Thanks in Advance




Aucun commentaire:

Enregistrer un commentaire