I need to disable ONLY the checkbox that is checked after i submit the form:

Question

This is my HTML code:

Actually I have lots more check-boxes designed as buttons to select a room(which is represented by checkbox), So all of them getting selected is very annoying.

 $("form").submit(function() { $('.seat input:checkbox').prop("disabled", true); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="qwer" action="/" method="post"> <ol class="block1"> <li class="row row--1"> <ol class="seats" type="A"> <li class="seat"> <input type="checkbox" id="1A" /> <label for="1A">1A</label> </li> <li class="seat"> <input type="checkbox" id="1B" /> <label for="1B">1B</label> </li> <li class="seat"> <input type="checkbox" id="1C" /> <label for="1C">1C</label> </li> <input type="submit" value="Register" /> </form>

After I check the selected checkbox and submit the form, all other checkbox-es also gets disabled.

Answer 1

You also have to add :checked to only disable the checked checkboxes.

 $("form").submit(function() { $('.seat input:checkbox:checked').prop("disabled", true); //Change here });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="qwer" action="/" method="post"> <ol class="block1"> <li class="row row--1"> <ol class="seats" type="A"> <li class="seat"> <input type="checkbox" id="1A" /> <label for="1A">1A</label> </li> <li class="seat"> <input type="checkbox" id="1B" /> <label for="1B">1B</label> </li> <li class="seat"> <input type="checkbox" id="1C" /> <label for="1C">1C</label> </li> <input type="submit" value="Register" /> </form>