When the required item of select2 is false, jquery is invalid

Question

How to use jQuery to make the required fields of select2 false? I want to use jQuery to make every select2 require=false and disable it.

I tried this...but $('#accodeformheader').find('input, select').attr('required', false); doesn't work. Is there a way to make select2's "required" = false?

$(document).ready(function() {
                $('#idtask').change(function() {
                  var taskVal = $(this).val();
                  console.log("Current task value", taskVal);
                  if (taskVal === "Grass") {
                    document.getElementById("idspeakerdetailsdiv").style.display = "block";
                  }
                  else {
                    document.getElementById("idspeakerdetailsdiv").style.display = "none";
                  }
                })

                $('.lexemeview').click(function() {
                  $('#accodeformheader').find('input, select').attr('disabled', true);
                  $('#accodeformheader').find('input, select').attr('required', false);
                  
                  document.getElementById("accodeformheader").style.display = "none";
                  
                  buttonType = $(this).attr("id")
                  activeform(buttonType)
                  $('#formdisplay').find('input, select').attr('disabled', true);
                  $('#editbutton').attr('hidden', false);
                  
                  var acode = $(this).attr("id");
                  console.log(accode)
                  $.getJSON("{{url_for('karya_bp.getonespeakerdetails')}}", {
                    asycaccesscode:String(accode)
                    }, function(data) {
                        console.log(data)
                        metadata = data.speakerdetails.current.workerMetadata
                        console.log (metadata)
                        $('#accesscode').attr('value', accode)

<div id="accodeformheader" style="display: block;">
              <div class="form-group">
                <label for="idaccesscodefor">Access Code For:</label><br>
                <select class="accesscodefor" id="idaccesscodefor" name="accesscodefor" style="width:55%" required></select><br>
              </div>

              <div class="form-group">
                <label for="idtask">Task :</label><br>
                <select class="task" id="idtask" name="task" style="width:55%" required></select><br>
              </div>

             <div id="uploadaccode" style="display: block;"></div>
            </div>
              <div class="form-group">

                <label class="col-form-label">Name:</label>
                <input type="text" class="form-control" id="idname" name="sname" placeholder="--Speaker Name--" style="width:55%" value="" required >
              </div>

              <div class="form-group">
              <label for="sagegroup">Age Group: </label> <br> 
              <select class="age" id="idage" name="sagegroup" style="width:55%" required>
              </select><br>
                </div>

            <div id="idspeakerdetailsdiv" style="display: none;">
                <div class="form-group">                    
                <label for="sgender">Gender: </label>  <br>
                <select class="gender" id="idgender" name="sgender" style="width:55%" required>
                
                </select><br>

                </div>  

                <div class="form-group">
                <label for="educationalevel">Educational Level: </label> <br>
                <select class="educationlvl" id="idelevel" name="educationalevel" style="width:55%" required>
                </select><br>
                </div>
              

                <div class="form-group">
                    <label for="moe12">Medium Of Education (upto 12th): </label><br>                           
                    <select class="educationmediumupto12" id="idmediumpre" name="moe12" multiple="multiple" style="width:55%" required>
                    </select><br>
                </div> 
                
                
                <div class="form-group">
                    <label for="moea12">Medium Of Education (After 12th): </label><br>                           
                    <select class="educationmediumafter12" id="idmediumpost" name="moea12" multiple="multiple" style="width:55%" required>
                    </select><br>
                </div> 
                
                

          </div>


            <button type="button" id="closebutton" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <input type="submit" value="Submit"> <br><br>
            
            </form>
          </div>

Answer 1

You can simply remove the "required" attribute if you don't need it

$('select').removeAttr('required');

If you want to reset, please follow these steps:

$('select').prop('required', 'required');

If you want to remove a specific select2 dropdown based on id or class, please follow these steps:

$('#your_id_name').removeAttr('required');

Use class name:

$('.your_class_name').removeAttr('required');

Similarly, you can set based on id and class, like this:

$('#your_id_name').prop('required', 'required');

Use class name:

$('.your_class_name').prop('required', 'required');

I hope I understood your question and gave the correct answer.