2013-04-24 73 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