samedi 4 juillet 2015

JQuery to check a CheckBox in user control (multiple instances used in a page)

I have a user control with 'CheckBox' and TextBox, and the CheckBox 'checked' is functioned using jquery. When I drag the custom control to the asp.net page, the script is working fine like expected (TextBox to toggle disable).
But the problem is when there are more than one user control in a single page,say CustomControl1 and CustomControl2 in a single page. Only the first control behaves as expected whereas the remaining acts like it is not a part of my custom control, that is the check box 'Checked' is not triggered. How do I sort this?
My JQuery for user control is based on ID

<script type="text/javascript" >
    $(document).ready(function () {
    $('#Text1').prop('disabled', true);
    $('input[id*=chkUseSearchCriteria]').prop('checked', false);

    $('input[id*=chkUseSearchCriteria]').change(function () {
        if ($('input[id*=chkUseSearchCriteria]').prop('checked') == true) {
                            $('#Text1').prop('disabled', false);
                            $('#Text1').focus();
        }
        else {
            $('#Text1').prop('disabled', true);
        }
       });
    });
    </script>

My user control design is like this

//STYLES
<style type="text/css" >
   .style1
    {
        width:100px;
        font-size:smaller;
        vertical-align:middle;
    }
    .style2
    {
       width: 200px;
    }
    .style3
    {
        width:auto;
    }
</style>

//TABLE
    <table style="font-family:Tahoma;font-size:small">
    <tr>
        <td class="style1">
            <asp:CheckBox ID="chkUseSearchCriteria" runat="server" Text="Category" />
        </td>
        <td class="style2">
            <input id="Text1" type="text" style=" width:100%" />
        </td>        
    </tr>    
</table>




Aucun commentaire:

Enregistrer un commentaire