-1

我遇到了 jQuery 和 PHP 的问题。我正在我的registration.php 文件中编写一个jQuery 函数，但它不起作用。这个jQuery函数是通过checkbox控制所有的文本框。

<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>

为什么呢？请帮忙，我还是编程世界的新手。谢谢。

我试图将它保存为 .html 文件它可以工作，但它不适用于 .php

4

3 回答 3

1

对于更改disabled和其他 DOM 属性，您应该使用propmethod 而不是attr，而不是使用 ID，您可以遍历 DOM 并使用closest和find方法找到目标输入。

$(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/

于 2013-04-24T03:49:08.510 回答
0

我对其进行了一些调整

$(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>

演示：小提琴

于 2013-04-24T03:49:53.853 回答
0

"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>
于 2013-04-24T03:43:38.063 回答