Semantic-UI Checkbox Read-only State

Last Updated : 28 Feb, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI has a bunch of components for user interface design. One of them is “Checkboxes”. Checkboxes are used to show different options to users to choose from. Users can select among them as per choice. Depending on the requirements of the usage of checkboxes there are different states of checkboxes. One of them is the read-only state.

Semantic UI Checkbox Read-only State: User might need to display some checkboxes in UI whose values are not to be changed or the person does not have the access to perform this action. In that case, read-only state comes in handy. Users can show the value and inform the person on UI of the option but do not grant him to change the state. So the checkbox is read-only for him.

Semantic-UI Checkbox Read-only State Class:

read-only: This class is used to display the checkbox in a read-only state and also prevent the changing of the value.

Syntax:

<div class="ui checkbox">
 <input type="checkbox">
 <label>....</label>
</div>

To instantiate the checkbox function, we use the following syntax:

<script>
   $('.ui.checkbox').checkbox();
</script>

Example 1: This example demonstrates the checkbox read-only state using the read-only class . It displays both the true and false condition in read-only condition.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
   <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> 
     
   <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
   </script> 
  
   <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
   </script> 
</head> 
  
<body> 
  <br/><br/> 
  <div class="ui container"> 
  <h2 style="color:green"> 
     GeeksforGeeks 
  </h2> 
  
  <p> 
    Semantic UI Checkbox Read-only State 
  </p> 
  <hr><br/> 
  
  <strong> 
    Read-only Checkboxes: 
  </strong><br/><br/> 
  
  <div class="ui form"> 
     <div class="inline fields"> 
      <div class="field"> 
         <div class="ui checkbox read-only"> 
          <input type="checkbox" checked="checked"> 
          <label>Read only checked checkbox</label> 
         </div> 
       </div> 
  
        <div class="field"> 
         <div class="ui checkbox read-only"> 
            <input type="checkbox"> 
            <label>Read only unchecked checkbox</label> 
         </div> 
        </div> 
     </div> 
  </div> 
 </div> 
  
  <script> 
    $('.ui.checkbox').checkbox(); 
  </script> 
</body> 
  
</html>