CODEWITHSUNDEEP
javascriptjqueryhtml
bramadwitra
bramadwitra

Reputation: 97

Validation Limit Checkbox doesn't worked when HTML Change

I need validation to count checked in checkbox HTML. I use code below

$("input[name='thinkingass[]']").change(function(){
    if ($("input[name='thinkingass[]']:checked").length > 2) {
        $(this).prop('checked', false);
        swal("allowed only 2 answer");
    }
});

And my HTML in first load page below

<input name="thinkingass[]" value="Abstract Random" data-option="c" type="checkbox">
<input name="thinkingass[]" value="Concrete Sequential" data-option="a" type="checkbox">
<input name="thinkingass[]" value="Concrete Random" data-option="b" type="checkbox">

My code validation works for HTML above. When I change HTML by JQuery (just different number and value). You can look below

    <input name="thinkingass[]" value="Concrete Sequential" data-option="c" type="checkbox">
<input name="thinkingass[]" value="Abstract Random" data-option="a" type="checkbox">
<input name="thinkingass[]" value="Concrete Random" data-option="b" type="checkbox">

Thanks in advance

SOLVING

I use Javascript inside of new HTML. Call one function in each of checkboxes HTML. Thanks for answers GUYS

Upvotes: 0

Views: 83

Answers (3)

mplungjan
mplungjan

Reputation: 177851

You need to delegate if you rewrite the DOM.

All event handlers are lost when you remove an element from the DOM or insert it after the event handler was defined

Find the nearest static container and add the event handler to that instead: $("#inputContainerID").on("change","input[name='thinkingass[]']",function(){

Example showing delegation and replace of HTML

$(function() {
  $("#container").on("change", "input[name='thinkingass[]']", function() {
    if ($("input[name='thinkingass[]']:checked").length > 2) {
      $(this).prop('checked', false);
      alert("allowed only 2 answer");
    }
  });
});

function changeIt() {
  var html = `<label><input name="thinkingass[]" value="Concrete Sequential" data-option="c" type="checkbox" />Concrete Sequential</label><br/>
  <label><input name="thinkingass[]" value="Abstract Random" data-option="a" type="checkbox">Abstract Random</label><br/>
  <label><input name="thinkingass[]" value="Concrete Random" data-option="b" type="checkbox">Concrete Random</label>`
  $("#container").html(html);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="container">
  <label><input name="thinkingass[]" value="Concrete Random" data-option="b" type="checkbox">Concrete Random</label><br/>
  <label><input name="thinkingass[]" value="Concrete Sequential" data-option="c" type="checkbox" />Concrete Sequential</label><br/>
  <label><input name="thinkingass[]" value="Abstract Random" data-option="a" type="checkbox">Abstract Random</label>
</div>
<button onclick="changeIt()">Change</button>

Alternatively do NOT rewrite the DOM but shuffle it. You did not post enough code to see how you move the inputs around

Upvotes: 2

Vinod kumar G
Vinod kumar G

Reputation: 655

it should work, what error you are getting , check the console log, more over use just checkbox selector to find the element. 

$( "input:checkbox").change(function(){ 
if ($("input[name='thinkingass[]']:checked").length > 2) {
        $(this).prop('checked', false);
        alert("allowed only 2 answer");
    }}

Upvotes: -1

A. Iglesias
A. Iglesias

Reputation: 2675

You're probably adding that new input, and not changing its values, right? If that's the case, the problem is that you have created the event directly associated to the inputs, so that events will associate when the DOM loads to the inputs that exist at that moment, but new inputs created don't get that association.

The solution is create a delegated event, it means you associate the event to an outer element, that is always going to exist and define the specific events that will affect to all its internal elements (you delegate that events).

We can't see the rest of your code, so as an example imagine you have all that inputs inside of a div...

<div id="myinputs">
    <input name="thinkingass[]" value="Abstract Random" data-option="c" type="checkbox">
    <input name="thinkingass[]" value="Concrete Sequential" data-option="a" type="checkbox">
    <input name="thinkingass[]" value="Concrete Random" data-option="b" type="checkbox">
</div>

... you could create the event like this...

$('div#myinputs').on('change','input[name="thinkingass[]"]',function() {
    if ($("input[name='thinkingass[]']:checked").length > 2) {
        $(this).prop('checked', false);
        swal("allowed only 2 answer");
    }
});

For your case, just change div#myinputs for one of your currents elements where the inputs are (form, div, etc).

I hope it helps

Upvotes: 0

Related Questions