How to disable checkboxes when submit button is clicked

Hello All,
I need a way to disable the checkboxes on my page once the submit button is clicked. My code is below, the page is for a question that once the submit button is checked the user should not be able to check the boxes again or click the submit button.
Any help would be appreciated.

Jamie

<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Merck Manual Case Study - 001</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
			rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"
			rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<link href="../styles/casestyles.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript"> 

</script>
<!-- show all on submit and show checked answer -->
<script type="text/javascript" src="../js/submit_answers.js"> </script>
<!-- Add jQuery library -->
<script type="text/javascript" src="fancybox/lib/jquery-1.10.1.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="../js/fancybox.js">

		
	</script>
<style type="text/css">
.explanation {
	display: none;
}
.correct {
	display:none;
}
.incorrect {
	display:none;
}
</style>
</head>
<body>
<div class="row-offcanvas row-offcanvas-left">
  <div id="sidebar" class="sidebar-offcanvas">
    <div class="col-md-12">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="hpi.html">History of Present Illness </a></li>
        <li><a href="ros.html">Review of Systems </a></li>
        <li><a href="pmh.html">Past Medical History </a></li>
        <li><a href="pe.html">Physical Examination </a></li>
        <li><a href="differentialdx.html">Essential Differential Diagnosis</a></li>
        <li><a href="relevant_testing.html">Relevant Testing</a></li>
        <li>Diagnosis</li>
        <li>Treatment</li>
        <li>Questions</li>
        <li>About the Case</li>
      </ul>
    </div>
  </div>
  <form>
    <div id="main" class="container-fluid">
      <div class="col-md-12">
        <p class="visible-xs">
          <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"> <i class="glyphicon glyphicon-chevron-left"></i> </button>
        </p>
        <!-- Footer Code -->
<div id="footer" style="overflow-y:hidden; overflow-x:hidden;">
  <div class="container" style="overflow-y:hidden; overflow-x:hidden;">
    <p class="muted credit"><img src="img/prev.png" width="24" height="21" / > <a href="relevant_testing.html" > Relevant Testing </a> |
      <a href="treatment.html" > Treatment </a><img src="img/next.png" width="24" height="21"  /> </div>
</div>
        <!-- Change the Heading -->
        <h3>Diagnosis</h3>
        <h5>At this time, the most likely diagnosis is</h5>
        <p>Please choose only one.</p>
        
        <!-- First Column-->
        <div class="col-md-3">
          <div class="bootstrap-demo"> 
            <!-- content goes here -->
            <p style="margin-bottom:0px">
              <input name="field" type="checkbox" value="incorrect" />
              Acute  bronchitis</p>
            <div class="correct" style="margin-left:20px;"><font color="#008000">Your Choice is Correct</font></div>
            <div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Your Choice is Incorrect</font></div>
            <div class="explanation" style="margin-left:20px;">Although the patient has a productive cough, he also has an infiltrate on chest x-ray.</div>
            <p style="margin-bottom:0px">
              <input name="field" type="checkbox" value="correct"  />
              Community-acquired  pneumonia</p>
            <div class="correct" style="margin-left:20px;"><font color="#008000">Your Choice is Correct</font></div>
            <div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Your Choice is Incorrect</font></div>
            <div class="explanation" style="margin-left:20px;">The chest x-ray shows a definite infiltrate.</div>
            <p style="margin-bottom:0px">
              <input name="field" type="checkbox" value="incorrect" />
              Health-care  associated pneumonia</p>
            <div class="correct" style="margin-left:20px;"><font color="#008000">Your Choice is Correct</font></div>
            <div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Your Choice is Incorrect</font></div>
            <div class="explanation" style="margin-left:20px;">The patient was not a resident in a nursing home or other long-term care facility.</div>
            <p style="margin-bottom:0px">
              <input name="field" type="checkbox" value="incorrect" />
              Lung  cancer</p>
            <div class="correct" style="margin-left:20px;"><font color="#008000">Your Choice is Correct</font></div>
            <div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Your Choice is Incorrect</font></div>
            <div class="explanation" style="margin-left:20px;">Although an obstructing cancer may cause an infiltrate, it is not the most likely cause of this patient’s acute symptoms.</div>
            <p> <br />
              <input type="button" id="ex3" value="Submit" onclick="show_all();"/>
            </p>
          </div>
        </div>
        <!-- Second Column -->
        <div class="col-md-3">
          <div class="bootstrap-demo"> 
            <!-- content goes here -->
            
            <p>Click <a class="fancybox fancybox.iframe" href="relevant_testing_all.html">here</a> to see the tests and explanations for this diagnosis</p>
          </div>
        </div>
     
       <div class="col-md-3"> <img src="../img/patient-001.png" width="231" height="184" alt="Patient 001" /></div>
      </div>
    </div>
  </form>
</div>

<!-- Bootstrap script --> 

<script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="../lightbox/js/lightbox.min.js"></script>
<link href="../lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />
<script type='text/javascript'>        
            $(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });
});
        
        </script> 
<script type="text/javascript">
var one="";
var two="";
function check(browser)
{
//document.getElementById("answer").value = browser
one = browser
updateIt()
}
function check1(browser)
{

//document.getElementById("answer").value += " " + browser
two = browser
updateIt()
}
function updateIt()
{
document.getElementById("answer").value = one +" "+ two
}
</script>
</body>
</html>

Open in new window

jamiepooleAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
this should do the trick:
$("form").submit(function(event) {
	$(":checkbox").attr("disabled", true);
	return;
	});

Open in new window


Place it e.g. in the $(document).ready function

HTH
Rainer
0
jamiepooleAuthor Commented:
I placed it in $(document).ready function and it didn't work. Any ideas.

<script type='text/javascript'>        
    $(document).ready(function() {				
  	$('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
	$("form").submit(function(event) {
	$(":checkbox").attr("disabled", true);
	return;
	});  
  });
});
</script> 

Open in new window

0
Rainer JeschorCommented:
Hi,

I think the position is wrong as it is placed inside the click function - not the document.ready.
Could you please try this:
<script type='text/javascript'>        
    $(document).ready(function() {				
		$('[data-toggle=offcanvas]').click(function() {
			$('.row-offcanvas').toggleClass('active');
		});
		$("form").submit(function(event) {
			$(":checkbox").attr("disabled", true);
			return;
		});  
	});
</script> 

Open in new window

Thanks and HTH
Rainer
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

jamiepooleAuthor Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for jamiepoole's comment #a40723936

for the following reason:

Thank you for the help that worked great.

Jamie
0
Rainer JeschorCommented:
Hi,
I think Jamie selected the wrong answer as solution.
Thanks
Rainer
0
jamiepooleAuthor Commented:
Thanks, this worked.
0
Rainer JeschorCommented:
Hi Jamie,
thanks. Solution no. 1487 - only 13 to go for 1500 accepted solutions.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.