JQuery code works in IE and Chrome but not Firefox

Question

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.

This similar to http://stackoverflow.com/questions/8389841/using-jquery-to-determine-selected-option-causes-specified-attribute-is-depreca? — j08691, Nov 16 '12 at 21:58
By looking at the syntax highlighting you can tell that something is wrong. You can't break strings with enter, you _need_ to concatenate them properly. — elclanrs, Nov 16 '12 at 22:00
also if using jQuery version >= 1.6 use `prop` not `attr` for `disabled` http://api.jquery.com/prop/ — charlietfl, Nov 16 '12 at 22:02
@elclanrs Sorry, In my actual JS file they are not broken with enter, however, the window in which i posted the question was to small to fit all of the code. I'll try now using prop instead......Nope still not working! — stark, Nov 16 '12 at 22:07
Your HTML is not formed correctly. You need to go back and make sure you are closing all your tags. You also used ID's multiple times.. ex. `id=safety`, `id=intro`. ID's should be unique.. if you want to use it multiple times, you should use it as a class — wirey00, Nov 16 '12 at 22:32
@wirey Opps my mistake, this was code i left in at the beginning however, i don't actually reference this in the code anywhere so the removal of these still did nothing. — stark, Nov 16 '12 at 22:46
@VIDesignz I changed this to .prop as suggested by charlietfl but still no change. — stark, Nov 16 '12 at 22:56
Ok so I made a little progress.. If I use 'change' or 'click' for a select/option element, I get the same error, but if I use 'select' I do not get an error. — VIDesignz, Nov 16 '12 at 23:09
Just realised the code function itself must execute because the text on the span changes on click so it MUST be the disabling statements. — stark, Nov 16 '12 at 23:10
So I am wondering if you change your 'click' for the eventlistener on your inputs, to maybe 'focus' , it may not throw the error. — VIDesignz, Nov 16 '12 at 23:10
I made a fiddle with your code and it works in chrome... Just copied and pasted http://jsfiddle.net/videsignz/JVMNK/ — VIDesignz, Nov 16 '12 at 23:35

score 1 · Answer 1 · answered Feb 04 '13 at 07:41

1

instead of true use "disabled".

$(".advancedGAS1, .advancedGAS2, .advancedARC1,.advancedARC2, .advancedMIG1,
.advancedMIG2, .introARC, .introGAS ").attr("disabled", "disabled");

answered Feb 04 '13 at 07:41

Ganesh Kadam

11
2

JQuery code works in IE and Chrome but not Firefox

1 Answers1