Hi I have a div box that opens on my page and then loads a html file which contains CKeditor to deal with the text area. The problem is that if I view the html file in my browser everything works well and I have all the editing options. When I use it in my JS script I get nothing. Can anyone help me please ?
The JS code that does this is here
$(document).ready(function(){
$('#'+divbox).load('../customer_rm/display_email_send.php', function() {
// once loaded
CKEDITOR.replace( 'mail_body' );
and the working HTML file is here
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<style type='text/css'>
table.t {border: 1px solid black}
td, tr {border: 0}
.bdr {
border: 4px solid black ;
}
.white {
background-color:#FFF ;
}
</style>
<div align='center'>
<br><br />
<table id='t' width='700' border='2' bgcolor='#ccc'>
<tr >
<td width='20'> </td>
<td width='50'> </td>
<td width='50'> </td>
<td > </td>
<td width='20' > </td>
</tr>
<tr>
<td> </td>
<td rowspan='3'>
<input type='button'id='send' value='Send'
style='width:60px; height:40px '
/><hr>
<input type='button' value='Close'
style='width:60px; height:20px ' onclick='fadeout()'
/>
</td>
<td><input type='button' value='To :' /></td>
<td><input type='text' class='white' id='mailto' size='80' /></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type='button' value='Cc :' /></td>
<td><input type='text' class='white' id='mailcc' name='mailcc' size='80' /></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type='button' value='Bcc :' id='bcc' /></td>
<td><input type='text' class='white' id='mailbcc' size='80' /></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type='button' value='Subject'
style='width:60px; height:20px ' onclick='fadeout()'
/></td>
<td colspan='2'><input type='text' class='white' id='subject' size='89' /></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan='3'>
<textarea id='mail_body' class='white' style='height:380px; width:600px; bgcolor:#fff ' >
</textarea>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
Why not use Jquery to call CKEditor to replace your div...seems much more straightforward:
$( 'textarea' ).ckeditor();
Reference Here: http://ckeditor.com/blog/CKEditor_for_jQuery
Related
I am trying to get the mortgage calculator on the right side of the website to fit in the box (div) that is supposed to be around it. You can see that it is overlapping.
Webpage: http://www.yourwhiteknight.com/properties/
As you can see from the code below, the width of the table is set in the table attribute (width="") and in CSS code but it is not obeying these rules. How can I force this table to be smaller?
Code:
<div class="textwidget">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<!-- Javascript function is here but no reference to width -->
<form id="mortgageCalculator">
<table border="0" cellpadding="1" style="background-color: #f4f5ed; width:248px" width="248">
<tbody><tr style="background-color: #496b1f; font-size:11px;">
<td colspan="2" align="CENTER">
<b><font color="white">Mortgage Calculator</font></b>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="1">
<tbody><tr>
<td colspan="2"><b>Mortgage Data:</b>
</td>
</tr><tr>
<td align="RIGHT">House Price ($):
</td>
<td>
<input type="TEXT" name="price" value="50000" size="8" onchange="UpdatePrincipal(this.form)" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQV
Q4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
</td>
</tr>
<tr>
<td align="RIGHT">Down Pymt ($):</td>
<td>
<input type="TEXT" name="down" value="0" size="8" onchange="UpdatePrincipal(this.form)">
</td>
</tr>
<tr>
<td align="right">Principal ($):</td>
<td>
<input type="text" name="principal" value="50000" size="8" readonly="true" style="background-color: #aaaaaa;">
</td>
</tr>
<tr>
<td align="RIGHT">Annual Int. Rate (%):</td>
<td>
<input type="TEXT" name="interest" value="8.5" size="5">
</td>
</tr>
<tr>
<td align="RIGHT">Term (Months):</td>
<td>
<input type="TEXT" name="term" value="120" size="5">
</td>
</tr>
<tr>
<td align="RIGHT">Monthly Pymt:</td>
<td>
<input type="TEXT" name="monthlyPayment" size="5">
</td>
</tr><tr>
<td align="RIGHT">Balloon Pymt:</td>
<td>
<input type="TEXT" name="balloon" size="5">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="CENTER" colspan="2">
<input type="BUTTON" name="cmdCalc" value="Calculate" onclick="calculate(this.form)">
</td>
</tr>
</tbody></table>
</form></div>
The table will only get as small as the content within it. Your text inputs in the calculator are large enough that they're limiting how small the table is. Set a smaller width on those inputs, and it should be all good!
the problem is within the table, with the inputs there. You can add a " width: 100%;" to the inputs and the problem is solved.
You can add the css like this:
#mortgageCalculator input {
width: 100%;
}
I have a form page and certain items only appear on the list if a link is clicked on. I want the link to hide when it is clicked on and the action it calls un-hides.
This is my test page:
function toggle_it(itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = ''
event.preventDefault()
} else {
document.getElementById(itemID).style.display = 'none';
event.preventDefault()
}
}
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong>
</td>
<td align="center"><strong>DESCRIPTION</strong>
</td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit">
</td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1
</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2
</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1
</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2
</td>
</tr>
</table>
The code is in CF but this is a JavaScript function.
BTW. Thank you whoever wrote the original script I found on Stackoverflow a while back.
Plunker
Description: Gave html elements for toggle unique ids. Also needed to update the javascript to get the parent element of the parent element of the link clicked. This only works when there are two elements to reach the tr.
Importantly, this code has an extra unhide that isn't needed...since we are hiding it and there is nothing to click.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong></td>
<td align="center"><strong>DESCRIPTION</strong></td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit"></td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2</td>
</tr>
</table>
</body>
</html>
JS
// Code goes here
function toggle_it(itemClickedID, itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = '';
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = 'none';
event.preventDefault();
} else {
event.preventDefault();
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = '';
document.getElementById(itemID).style.display = 'none';
}
}
My code is not loading the textarea from tinymce.min.js , i have included everything and i have also tried DTEDITOR don't remember the name but still no solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Admin Area </title>
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>
tinymce.init({selector:'textarea'});
</script>
</head>
<body bgcolor="grey">
<form method="post" action="insert_product.php" enctype="multipart/form- data">
<table width="700" align="center" border="1" bgcolor="#006699">
<tr align="center">
<td colspan="2">
<h2> Insert new Product</h2>
</td>
</tr>
<tr>
<td align="right">
<b>Product Title</b>
</td>
<td>
<input type="text" name="product_title" size="50"/>
</td>
</tr>
<tr>
<td align="right">
<b>Product Category</b>
</td>
<td>
<select name="product_cart">
<option>Select a Category</option>
<?php
$get_brands="select * from brands";
$run_brands=mysqli_query($con, $get_brands);
while($row_brands=mysqli_fetch_array( $run_brands)){
$brand_id = $row_brands['brand_id'];
$brand_title=$row_brands['brand_title'];
echo "<option value='$brand_id'>$brand_title </option>";
}
?>
</select>
</td>
</tr>
<tr>
<td align="right">
<b>Product image 1</b>
</td>
<td>
<input type="file" name="product_img1"/>
</td>
</tr>
<tr>
<td align="right">
<b>Product image 2</b>
</td>
<td>
<input type="file" name="product_img2"/>
</td>
</tr>
<tr>
<td align="right">
<b>Product image 3</b>
</td>
<td>
<input type="file" name="product_img3"/>
</td>
</tr>
<tr>
<td align="right">
<b>Product price</b>
</td>
<td>
<input type="text" name="product_price"/>
</td>
</tr>
<tr>
<td align="right">
<b>Product Description</b>
</td>
<td>
<textarea name="product_desc" cols="35" rows="10" ></textarea>
</td>
</tr>
<tr>
<td align="right">
<b>Product Keywords</b>
</td>
<td>
<input type="text" name="product_keywords" size="50"/>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="submit"/>
</td>
</tr>
</body>
</htmal>
You are calling tinymce.init({selector:'textarea'}); before the HTML for the textarea element exists. This script is run inline with the page loading, so you'll have to either move the script somewhere after the textarea element, or create an onload event handler.
I want to use a jQuery UI slider on this page, but for some reason it won't work. You will see I am busy with "Height in cm without shoes" and I will complete this form as soon as I can get this problem solved. Here is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module Health Measurements</title>
<link rel="stylesheet" href="jquery-ui-1.10.3/themes/base/jquery.ui.all.css">
<script src="jquery-ui-1.10.3/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.mouse.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="jquery-ui-1.10.3/demos/demos.css">
<script>
$(function() {
$( "#slider-40" ).slider({
min: 65,
max: 240,
value: 170,
slide: function( event, ui ) {
$( "#40" ).val( ui.value );
}
});
$( "#40" ).val( $( "#slider-40" ).slider( "40" ) );
});
</script>
<style type="text/css">
/*
.style2 {font-size: medium}
*/
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="550" border="1">
<tr>
<td colspan="2" bgcolor="#5ACDC7"><h3>Health Measurements</h3></td>
</tr>
<tr>
<td width="332">Height in cm without shoes</td>
<td width="202">
<label for="40"><span class="style2">Height</span>:</label>
<input type="text" id="40" style="border:0; color:#f6931f; font-weight:bold;" />
</td>
</tr>
<tr>
<td colspan="2">
<div id="slider-40" style="height:5px;"></div>
</td>
</tr>
<tr>
<td>Weight in kg without shoes</td>
<td><label>
<input name="41" type="text" id="41" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Hip circumference in cm</td>
<td><label>
<input name="42" type="text" id="42" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Waist circumference in cm</td>
<td><label>
<input name="43" type="text" id="43" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Have you eaten in the last 7 hours?</td>
<td><label>
<select name="44" id="44">
<option>Yes</option>
<option>No</option>
</select>
</label></td>
</tr>
<tr>
<td>Systolic blood pressure mmHg</td>
<td><label>
<input name="45" type="text" id="45" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Diastolic blood pressure mmHg</td>
<td><label>
<input name="46" type="text" id="46" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Glucose mmol/l</td>
<td><label>
<input name="47" type="text" id="47" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Total Cholesterol mmol/l</td>
<td><label>
<input name="48" type="text" id="48" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#5ACDC7"><h5>BP 5 Minute Follow-up</h5></td>
</tr>
<tr>
<td>Systolic blood pressure 5 min</td>
<td><label>
<input name="51" type="text" id="51" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Diastolic blood pressure 5 min</td>
<td><label>
<input name="52" type="text" id="52" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><label>
<input type="submit" name="button1" id="button1" value="Submit" />
</label></td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
I would appreciate if someone could just point out if you see some errors?
This works for me:
plunker
If the slider does not show up at all please check:
jquery and jquery-ui are loaded.
jquery-ui is loaded AFTER jquery
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
For changing disabled and other DOM properties you should use prop method instead of attr, and instead of using IDs you can traverse the DOM and find the target inputs using closest and find methods.
$(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/
"css","wrt","maths" Id attributes are not given to corresponding check box.. Please add this and try.
HTML code:
<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>
I made some tweaks to it
$(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>
Demo: Fiddle