How to set Dynamic enable/disable for dynamically added checkox

Question

To generate dynamic check boxes I am using map like this

{{range $key, $val := .package.Group_Name_Map}}
  <div class="row">
    <div class="col-xs-12 col-sm-3 col-md-3">
        <label><strong>{{$val}}</strong></label>
    </div>              
    <div class="col-xs-12 col-sm-3 col-md-3">
        <input type="checkbox" name="read">
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3">
        <input type="checkbox" name="write">
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3">
        <input type="checkbox" name="update">
    </div>

  </div>
{{end}}

now i want these checkboxes to be predefined by dynamically got values. This i have done for beego framework

_predefined by dynamically got values_...can't get it? put lights on it. — Jai, Nov 19 '15 at 12:29

online Thomas · Answer 1 · 2015-11-19T12:27:27.970

0

var statement = true;
if (statement) {
    $('input[type=checkbox]').prop('checked', true);
}

http://jsfiddle.net/r0o8kxvo/1/

This will select all input's that are checkboxes and make them checked if the statement is true

statement is a placeholder for what you call

dynamically got values

edited Nov 19 '15 at 12:27

answered Nov 19 '15 at 12:20

online Thomas

8,864
6
44
85

Use `.prop()` instead of `.attr()` – Satpal Nov 19 '15 at 12:22

Sathish · Answer 2 · 2015-11-19T12:34:51.637

In HTML Just add disabled="disabled" as an attribute to disable and checked="checked" as attribute to checked as default

<input type="checkbox" name="update" checked> checked
<input type="checkbox" name="update" disabled> disabled
<input type="checkbox" disabled="disabled" checked="checked"> disable and checked

in jQuery use prop() function

$('.checks').prop("checked",true);
$('.checks1').prop("disabled",true);
$('.enable').prop("disabled",false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="checkbox" class="checks" name="update"> checks1
    <input type="checkbox" class="checks1" name="updates"> disabled
    <input type="checkbox" class="enable" name="updates"> enable

score 0 · Answer 3 · answered Nov 19 '15 at 13:48

Try something like this:

1.Dynamically create checkbox

$('#btn').click(function () {
    var cb1 = "<input type='checkbox' class='cb1' value='cb1'>I am a checkbox.";
    $("#panel").html(cb1);
});

2.Dynamically enable/disable checkbox

$('#ble').click(function () {
    var stat = $(".cb1").is(":disabled");
    if (stat) {
        $(".cb1").prop('disabled', false);
    } else {
        $(".cb1").prop('disabled', true);
    }
});

3.Dynamically check/uncheck the checkbox

$('#check').click(function () {
    var stat = $(".cb1").is(":checked");
    if (stat) {
        $(".cb1").prop('checked', false);
    } else {
        $(".cb1").prop('checked', true);
    }
});

DEMO

How to set Dynamic enable/disable for dynamically added checkox

3 Answers3