asked on

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

Rainer Jeschor

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

jamiepoole

ASKER

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

ASKER CERTIFIED SOLUTION

Rainer Jeschor

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jamiepoole

ASKER

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

Rainer Jeschor

Hi,
I think Jamie selected the wrong answer as solution.
Thanks
Rainer

jamiepoole

ASKER

Thanks, this worked.

Rainer Jeschor

Hi Jamie,
thanks. Solution no. 1487 - only 13 to go for 1500 accepted solutions.