Reputation: 285
I have written this code (i'm new to jquery) and it refuses to work in chrome. I first manipulated it in jsfiddle then added it to the js code.
When I used firebug I get the following error: Warning: Use of attributes' specified attribute is deprecated. It always returns true. Source File: http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
It runs ok up until the click functions.
Basically what I am trying to achieve is to disable certain checkboxes when other checkboxes are checked (When safety is checked, then intro is enabled, when intro is clicked both advanced are enabled).
So here is the Jquery code that is faulty:
$(document).ready(function() {
$(".safetyARC").click(function() {
$(".advancedARC1, .advancedARC2, .advancedGAS1, .advancedGAS2, .advancedMIG1,
.advancedMIG2, .introGAS, .introMIG").attr("disabled", true);
$("#Notification").text("*You must enrol on the INTRO course before selecting the
ADVANCED");
});
$(".safetyGAS").click(function() {
$(".advancedGAS1, .advancedGAS2, .advancedARC1 .advancedARC2, .advancedMIG1,
.advancedMIG2, .introARC, .introMIG ").attr("disabled", true);
$("#Notification").text("*You must enrol on the INTRO course before selecting the
ADVANCED");
});
$(".safetyMIG").click(function() {
$(".advancedGAS1, .advancedGAS2, .advancedARC1,.advancedARC2, .advancedMIG1,
.advancedMIG2, .introARC, .introGAS ").attr("disabled", true);
$("#Notification").text("*You must enrol on the INTRO course before selecting the
ADVANCED");
});
$(".introARC").click(function() {
$(".advancedGAS1, .advancedGAS2, advancedMIG1, .advancedMIG2, .introGAS,
.introMIG").attr("disabled", true);
$("#Notification").text("*Now you may chose from the ADVANCED courses");
});
$(".introGAS").click(function() {
$(".advancedARC1, .advancedARC2, .advancedMIG1, .advancedMIG2, .introARC,
.introMIG").attr("disabled", true);
$("#Notification").text("*Now you may chose from the ADVANCED courses");
});
$(".introMIG").click(function() {
$(".advancedGAS1, .advancedGAS2, .advancedARC1, .advancedARC2, .introGAS, .introARC
").attr("disabled", true);
$("#Notification").text("*Now you may chose from the ADVANCED courses");
});
});
and the HTML:
<div id="wrapper">
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1>WeldingCourses</h1>
</div>
</div>
<div id="banner">
<div class="content">
<div id="white">
<form name="myform" action="enrole.php" method="get" >
<div id="mainForm">
<h3>Have you had any welding experience?</h3>
<input type="radio" name="experience" id="radioYes"value="yes">Yes<br>
<input type="radio" name="experience" id="radioNo" value="no">No
<div id="weldingCourse">
<div id="section1">
<h3>Please select a Welding course and a Module?</h3>
<select id="typeWeld">
<option>Please Select...</option>
<option id= "section2" value="1">ARC</option>
<option id="section3" value="2">GAS</option>
<option id="section4"value="3">MIG</option>
<option id="section5"value="4">ANY</option>
</select>
</div>
<span id="Notification"></span>
<div id="div4">
<div id="div1">
<table id="arc">
<tr class="odd">
<td>CODE</td>
<td>TYPE</td>
<td>LEVEL</td>
<td>DESCRIPTION</td>
<td>SELECT</td>
</tr>
<tr>
<td>AS</td>
<td>ARC</td>
<td>Safety</td>
<td>ARC Welding Saftey</td>
<td><input id="saftey" type="checkbox" class="safetyARC"></td>
</tr>
<tr>
<td>A1</td>
<td>ARC</td>
<td>Intro</td>
<td>Bead control and simple butt welds in mild steel.</td>
<td><input type="checkbox" id="intro" class="introARC" ></td>
</tr>
<tr>
<td>A2</td>
<td>ARC</td>
<td>Advanced</td>
<td>Vertical Welding</td>
<td><input type="checkbox" class="advancedARC1"></td>
</tr>
<tr>
<td>A3</td>
<td>ARC</td>
<td>Advanced</td>
<td>Specialised Electrodes</td>
<td><input type="checkbox" class="advancedARC2"></td>
</tr>
</table>
</div>
<div id="div2">
<table id="gas">
<tr class="odd">
<td>CODE</td>
<td>TYPE</td>
<td>LEVEL</td>
<td>DESCRIPTION</td>
<td>SELECT</td>
</tr>
<tr>
<td>GS</td>
<td>GAS</td>
<td>Safety</td>
<td>The safe use of oxyacetylene welding equipment</td>
<td><input id="saftey" type="checkbox" class="safetyGAS"></td>
</tr>
<tr>
<td>G1</td>
<td>GAS</td>
<td>Intro</td>
<td>Bead control and simple butt welds in mild steel.</td>
<td><input type="checkbox" id="intro" class="introGAS"></td>
</tr>
<tr>
<td>G2</td>
<td>GAS</td>
<td>Advanced</td>
<td>Positional welds and weld testing</td>
<td><input type="checkbox" class="advancedGAS1"></td>
</tr>
<tr>
<td>G3</td>
<td>GAS</td>
<td>Advanced</td>
<td>Gas welding of aluminium</td>
<td><input type="checkbox" class="advancedGAS2"></td>
</tr>
</table>
</div>
<div id="div3">
<table id="mig">
<tr class="odd">
<td>CODE</td>
<td>TYPE</td>
<td>LEVEL</td>
<td>DESCRIPTION</td>
<td>SELECT</td>
</tr>
<tr>
<td>MS</td>
<td>MIG</td>
<td>Safety</td>
<td>The safe use of MIG welding equipment</td>
<td><input id="saftey" type="checkbox" class="safetyMIG" value="safety"></td>
</tr>
<tr>
<td>M1</td>
<td>MIG</td>
<td>Intro</td>
<td>Bead control and simple horizontal welds of mild steel</td>
<td><input type="checkbox" id="intro" class="introMIG"></td>
</tr>
<tr>
<td>M2</td>
<td>MIG</td>
<td>Advanced</td>
<td>MIG auto-mobile body welding</td>
<td><input type="checkbox" class="advancedMIG1"></td>
</tr>
<td>M3</td>
<td>MIG</td>
<td>Advanced</td>
<td>MIG welding aluminium and stainless steel</td>
<td><input type="checkbox" class="advancedMIG2"></td>
</tr>
</table>
</div>
</div>
</div>
<input type="submit" value="Submit">
</form>
</div>
</div>
Thanks in advance to anyone that answers.
Upvotes: 0
Views: 639
Reputation: 11
instead of true use "disabled".
$(".advancedGAS1, .advancedGAS2, .advancedARC1,.advancedARC2, .advancedMIG1,
.advancedMIG2, .introARC, .introGAS ").attr("disabled", "disabled");
Upvotes: 1