javascript - Writing jQuery function in PHP file

Question

I've encountered a problem jQuery and PHP. I'm writing a jQuery function in my registration.php file, but it doesn't work. This jQuery function is to control all the textbox via the checbox.

<script src="jquery.js"></script>
<script>
$(document).ready(function(){

$('#css').click(function(){
if (this.checked) {
$('#csc').removeAttr("disabled");
    $('#cse').removeAttr("disabled");
    $('#csp').removeAttr("disabled");
}
else {
$("#csc").attr("disabled", true);
    $("#cse").attr("disabled", true);
    $("#csp").attr("disabled", true);
}
});

$('#wrt').click(function(){
if (this.checked) {
$('#wsc').removeAttr("disabled");
    $('#wse').removeAttr("disabled");
    $('#wsp').removeAttr("disabled");
}
else {
$("#wsc").attr("disabled", true);
    $("#wse").attr("disabled", true);
    $("#wsp").attr("disabled", true);
}
});

$('#maths').click(function(){
if (this.checked) {
$('#msc').removeAttr("disabled");
    $('#mse').removeAttr("disabled");
    $('#msp').removeAttr("disabled");
}
else {
$("#msc").attr("disabled", true);
    $("#mse").attr("disabled", true);
    $("#msp").attr("disabled", true);
}
});

$('#sccb').click(function(){
if (this.checked) {
$('#ssc').removeAttr("disabled");
    $('#sse').removeAttr("disabled");
    $('#ssp').removeAttr("disabled");
}
else {
$("#ssc").attr("disabled", true);
    $("#sse").attr("disabled", true);
    $("#ssp").attr("disabled", true);
}
});

});

</script>



<table class="registration">
        <tr>
        <td width="250">
        <p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Subjects</strong></p>
        </td>
        <td width="220">
        <p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Full Name</strong></p>
        </td>
        <td width="200">
        <p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Email</strong></p>
        </td>
        <td width="150">
        <p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Phone Number</strong></p>
        </td>
        </tr>
        <tr>
        <td>
            <table>
                <tr>
                    <td><input type="checkbox" id="cscb" name="computerskills" value="computerskills"></td>
                    <td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-computerskills-icon.png"></td>
                    <td><p5>Computer Skills</p5></td>
                </tr>
            </table>
        </td>
        <td>
            <input type="text" id="csc" name="CScoor" disabled="disabled" size="30"></input>
        </td>
        <td>
            <input type="text" id="cse" name="CS_email" disabled="disabled" size="27"></input>
        </td>
        <td>
            <input type="text" id="csp" name="CS_phone" disabled="disabled"></input>
        </td>
        </tr>

        <tr>
        <td>
            <table>
                <tr>
                    <td><input type="checkbox" name="writing" value="writing"></td>
                    <td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-english-icon.png"></td>
                    <td><p5>English</p5></td>
                    <td><p5 style="font-size: 12px; font-weight: normal; color: #333333;"> & </p5></td>
                    <td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-writing-icon.png"></td>
                    <td><p5>Writing</p5></td>
                </tr>
            </table>
        </td>
        <td>
            <input type="text" id="wsc" name="Engcoor" disabled="disabled" size="30"></input>
        </td>
        <td>
            <input type="text" id="wse" name="Eng_email" disabled="disabled" size="27"></input>
        </td>
        <td>
            <input type="text" id="wsp" disabled="disabled" name="Eng_phone"></input>
        </td>
        </tr>


        <tr>
        <td>
            <table>
                <tr>
                    <td><input type="checkbox" name="mathematics" value="mathematics"></td>
                    <td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-mathematics-icon.png"></td>
                    <td><p5>Mathematics</p5></td>
                </tr>
            </table>
        </td>
        <td>
            <input type="text" id="msc"name="Mcoor" disabled="disabled" size="30"></input>
        </td>
        <td>
            <input type="text" id="mse" name="M_email" disabled="disabled" size="27"></input>
        </td>
        <td>
            <input type="text" id="msp" disabled="disabled" name="M_phone"></input>
        </td>
        </tr>

        <tr>
        <td>
            <table>
                <tr>
                    <td><input type="checkbox" id="sccb" name="science" value="science"></input>

                    </td>
                    <td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-science-icon.png"></td>
                    <td><p5>Science</p5></td>
                </tr>
            </table>
        </td>
        <td>
            <input type="text" id="ssc" name="Sccoor" disabled="disabled" size="30"></input>
            </script>
        </td>
        <td>
            <input type="text" id="sse" name="Sc_email" disabled="disabled" size="27"></input>
        </td>
        <td>
            <input type="text" id="ssp" name="Sc_phone" disabled="disabled"></input>
        </td>
        </tr>


        </table>

Why is that so? Please help, I'm still new to the programming world. Thanks.

I tried to save it as .html file it works, but it doesn't work with .php

score 1 · Accepted Answer

disabledおよびその他の DOM プロパティを変更するには、の代わりにメソッドを使用する必要があります。ID を使用propする代わりに、およびメソッドを使用attrして DOM を走査し、ターゲットの入力を見つけることができます。closestfind

$(document).ready(function () {
    $('table input[type=checkbox]').change(function () {
        $(this).closest('table')
               .closest('tr')
               .find('input[type=text]')
               .prop('disabled', !this.checked);
    });
});

http://jsfiddle.net/hum7n/

score 0 · Accepted Answer

私はそれにいくつかの微調整をしました

$(document).ready(function() {
    $('.skills').on('click', '.chk_skill', function(){
        $(this).closest('tr.skill').find('input').not(this).prop('disabled', !this.checked)
    })
});

HTML

<table class="registration">
    <tr>
        <td width="250">
            <p style="font-color: black; font-size: 12px; margin-bottom: 1px">
                <strong>Subjects</strong>
            </p>
        </td>
        <td width="220">
            <p style="font-color: black; font-size: 12px; margin-bottom: 1px">
                <strong>Full Name</strong>
            </p>
        </td>
        <td width="200">
            <p style="font-color: black; font-size: 12px; margin-bottom: 1px">
                <strong>Email</strong>
            </p>
        </td>
        <td width="150">
            <p style="font-color: black; font-size: 12px; margin-bottom: 1px">
                <strong>Phone Number</strong>
            </p>
        </td>
    </tr>

    <tr>
        <td>
            <table class="skills">
                <tr class="skill">
                    <td>
                        <table>
                            <tr>
                                <td><input class="chk_skill" type="checkbox" id="cscb" name="computerskills"
                                    value="computerskills" /></td>
                                <td><img
                                    src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-computerskills-icon.png" /></td>
                                <td><p5>Computer Skills</p5></td>
                            </tr>
                        </table>
                    </td>
                    <td><input type="text" id="csc" name="CScoor"
                        disabled="disabled" size="30"></input></td>
                    <td><input type="text" id="cse" name="CS_email"
                        disabled="disabled" size="27"></input></td>
                    <td><input type="text" id="csp" name="CS_phone"
                        disabled="disabled"></input></td>
                </tr>
                <tr class="skill">
                    <td>
                        <table>
                            <tr>
                                <td><input class="chk_skill" type="checkbox" name="writing"
                                    value="writing"></td>
                                <td><img
                                    src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-english-icon.png" /></td>
                                <td><p5>English</p5></td>
                            </tr>
                        </table>
                    </td>
                    <td><input type="text" id="wsc" name="Engcoor"
                        disabled="disabled" size="30"></input></td>
                    <td><input type="text" id="wse" name="Eng_email"
                        disabled="disabled" size="27"></input></td>
                    <td><input type="text" id="wsp" disabled="disabled"
                        name="Eng_phone"></input></td>
                </tr>


                <tr class="skill">
                    <td>
                        <table>
                            <tr>
                                <td><input class="chk_skill" type="checkbox"
                                    name="mathematics" value="mathematics" /></td>
                                <td><img
                                    src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-mathematics-icon.png" /></td>
                                <td><p5>Mathematics</p5></td>
                            </tr>
                        </table>
                    </td>
                    <td><input type="text" id="msc" name="Mcoor"
                        disabled="disabled" size="30"></input></td>
                    <td><input type="text" id="mse" name="M_email"
                        disabled="disabled" size="27"></input></td>
                    <td><input type="text" id="msp" disabled="disabled"
                        name="M_phone"></input></td>
                </tr>

                <tr class="skill">
                    <td>
                        <table>
                            <tr>
                                <td><input class="chk_skill" type="checkbox" id="sccb"
                                    name="science" value="science"></input></td>
                                <td><img
                                    src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-science-icon.png" /></td>
                                <td><p5>Science</p5></td>
                            </tr>
                        </table>
                    </td>
                    <td><input type="text" id="ssc" name="Sccoor"
                        disabled="disabled" size="30"></input></td>
                    <td><input type="text" id="sse" name="Sc_email"
                        disabled="disabled" size="27"></input></td>
                    <td><input type="text" id="ssp" name="Sc_phone"
                        disabled="disabled"></input></td>
                </tr>


            </table>
        </td>
    </tr>
</table>

デモ:フィドル

score 0 · Accepted Answer

"css","wrt","maths" 対応するチェックボックスにId属性が付与されていません.これを追加して試してみてください.

HTML コード:

<table class="registration">
    <tr>
        <td width="250">
            <p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Subjects</strong></p>
        </td>
        <td width="220">
            <p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Full Name</strong></p>
        </td>
        <td width="200">
            <p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Email</strong></p>
        </td>
        <td width="150">
            <p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Phone Number</strong></p>
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td><input type="checkbox" id="css" name="computerskills" value="computerskills"></td>
                    <td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-computerskills-icon.png"></td>
                    <td><p5>Computer Skills</p5></td>
    </tr>
</table>
</td>
<td>
    <input type="text" id="csc" name="CScoor" disabled="disabled" size="30"></input>
</td>
<td>
    <input type="text" id="cse" name="CS_email" disabled="disabled" size="27"></input>
</td>
<td>
    <input type="text" id="csp" name="CS_phone" disabled="disabled"></input>
</td>
</tr>

<tr>
    <td>
        <table>
            <tr>
                <td><input type="checkbox" name="writing" id="wrt" value="writing"></td>
                <td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-english-icon.png"></td>
                <td><p5>English</p5></td>
    <td><p5 style="font-size: 12px; font-weight: normal; color: #333333;"> & </p5></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-writing-icon.png"></td>
<td><p5>Writing</p5></td>
</tr>
</table>
</td>
<td>
    <input type="text" id="wsc" name="Engcoor" disabled="disabled" size="30"></input>
</td>
<td>
    <input type="text" id="wse" name="Eng_email" disabled="disabled" size="27"></input>
</td>
<td>
    <input type="text" id="wsp" disabled="disabled" name="Eng_phone"></input>
</td>
</tr>


<tr>
    <td>
        <table>
            <tr>
                <td><input type="checkbox" id="maths" name="mathematics" value="mathematics"></td>
                <td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-mathematics-icon.png"></td>
                <td><p5>Mathematics</p5></td>
</tr>
</table>
</td>
<td>
    <input type="text" id="msc"name="Mcoor" disabled="disabled" size="30"></input>
</td>
<td>
    <input type="text" id="mse" name="M_email" disabled="disabled" size="27"></input>
</td>
<td>
    <input type="text" id="msp" disabled="disabled" name="M_phone"></input>
</td>
</tr>

<tr>
    <td>
        <table>
            <tr>
                <td><input type="checkbox" id="sccb" name="science" value="science"></input>

                </td>
                <td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-science-icon.png"></td>
                <td><p5>Science</p5></td>
</tr>
</table>
</td>
<td>
    <input type="text" id="ssc" name="Sccoor" disabled="disabled" size="30"></input>
</script>
</td>
<td>
    <input type="text" id="sse" name="Sc_email" disabled="disabled" size="27"></input>
</td>
<td>
    <input type="text" id="ssp" name="Sc_phone" disabled="disabled"></input>
</td>
</tr>


</table>

javascript - Writing jQuery function in PHP file

3 に答える 3

Related

Reference