JSFiddle - React, Tailwind, and code Playground

by ojtramp

HTML

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>


<div id="question1">
  
  <h6>Question One</h6>

  <div class="options">
    <label for="option-text-0">Disable</label>
    <input class="uk-checkbox" type="checkbox" id="option-text-0" name="Disable">
  </div>
  
  
   <div class="options">
    <label for="option-text-1">Normal Answer</label>
    <input class="uk-checkbox" type="checkbox" id="option-text-1" name="Enable">
  </div>
  
  
</div>


<div id="question2">

  <h6>Question Two</h6>

  <div class="options">
    <label for="option-text-0">Disable</label>
    <input class="uk-checkbox" type="checkbox" id="option-text-0" name="Disable">
  </div>
  
  
   <div class="options">
    <label for="option-text-1">Normal Answer</label>
    <input class="uk-checkbox" type="checkbox" id="option-text-1" name="Enable">
  </div>
  
  
</div>

JavaScript

disableOptions = ["Disable"];

    // Add click event to each option
    $(".options").click( function () {
      
			// Store option text
      option = $(this).find("label").text();
      
      // Create boolean
      found = false;

      // Cycle through the array
      disableOptions.forEach( function ( value, index ) {
      
        // Check if chosen option equals current element in array
        if ( option == value ) {

           // Mark the found boolean as true
           found = true;

        }
   
      });


      // Check if entry matched a value in the array
      if ( found == true ) {
            
      	 // Check if the box has been checked
      	 if ( $(this).find("input").prop( "checked" ) == true ) {
      
         		// Disable the options for this question
         		$(this).parent().find(".options input").prop('disabled', true).prop( "checked", false );

         		// Re-active the checkbox that disabled the others
         		$(this).find("input").prop('disabled', false).prop( "checked", true );

				} else {
      
      			// Re-enable all checkboxes
         		$(this).parent().find(".options input").prop('disabled', false);
            
        }
         
       }
      
    });