2013-04-24 76 views
-1

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

<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

+0

的问题是什么是你所得到的错误?你有没有试过检查萤火虫 – Satya 2013-04-24 03:31:51

+2

请解释它不起作用。 – Jesperhag 2013-04-24 03:32:01

+0

要改变'disabled'属性,你应该使用'prop'而不是'attr',你的代码需要一个基本的评论。 – undefined 2013-04-24 03:33:52

回答

0

“CSS”,“WRT”工作,“数学” 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> 
+0

哦,我错过了。它现在有效。非常感谢,你救了我的一天。 – rapide 2013-04-24 03:52:33

1

为了改变disabled等DOM属性应该使用prop方法,而不是attr,并且代替使用的ID可以遍历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/

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> 

演示:Fiddle