temporarily removing and later reinserting a DOM element?

Question

Is there some jquery magic that will let me do the following:

[0- define some element in HTML (eg, a unchecked checkbox)]

1- update its DOM element by s

Answer 1

This is not entirely relevant but may be helpful to someone else sometime later on. I found with a small form of checkboxes it's easier to prevent checking them altogether. This may come in handy in situations where you may have a questionnaire or a series of options of a product with varying values. you could even look at changing the attributes on an input on change of another element or the element in questions, This can potentially create a lot of cool things, here is a good link i found on stack overflow for this Set new id with jQuery.

$("#ch1").change(function() {
$("#ch1").prop('disabled', true);
});
$("#ch2").change(function() {
$("#ch2").prop('disabled', true);
});
$("#ch3").change(function() {
$("#ch3").prop('disabled', true);
$("#ch4").prop('disabled', false);
});
$("#ch4").change(function() {
$("#ch4").prop('disabled', true);
$("#ch3").prop('disabled', false);
});
// ----> using Name selector :
//$('input[name="checkbox5"]').click(function(){
//$('input[name="checkbox6"]').prop('checked', false);			 
//    });
//$('input[name="checkbox6"]').click(function(){
//$('input[name="checkbox5"]').prop('checked', false);			 
//    });
// ----> using ID selector :
//$('input[id="ch5"]').click(function(){
//$('input[id="ch6"]').prop('checked', false);			 
//    });
// OR
//$("#ch5").click(function(){
//$("#ch6").prop('checked', false);
// });
//$("#ch6").click(function(){
//$("#ch5").prop('checked', false);			 
//    });
// ----> Using Class Selector :
$("input.checklast").change(function() {
    $("input.checklast").not(this).prop("checked", false);
  });
// which is shorter but requires that classes must be separated individually or grouped.
$("#ch5").change(function() {
$("#ch5").prop('disabled', true);
$("#ch6").prop('disabled', false);
});
$("#ch6").change(function() {
$("#ch6").prop('disabled', true);
$("#ch5").prop('disabled', false);
});

input[type=checkbox] {
  transform: scale(1.5);
}

 Disabled checkboxes once checked

Checkbox1:




Checkbox2







 Checkboxes disabled if either is selected
Checkbox3:




Checkbox4


 Combine Second Example with uncheck if checked and you get:

Checkbox3:





Checkbox4