How to preselect and disable specific checkboxes using js/jquery?

Question

I have checkboxes with randomly generated ids on every page view and want to preselect and disable some of them, so they can not get unchecked anymore. Is it possible?

With a simple script which looks after value="" I'm able to achieve the preselection but if I try to disable it at the same time, it disables all input fields on the page.

On closer inspection I found out that they have these attributes in common: <div id="cb-selection">and <input name="mycb">.

What would be your solution if we had this:

<form method="post" id="submit-this" class="" enctype="multipart/form-data">
    <div id="cb-selection">
        <div>
            <input type="checkbox" name="mycb" id="?" value="Check1">
            <label for="?"> Check1 </label>
        </div>
        <div>
            <input type="checkbox" name="mycb" id="?" value="Check2">
            <label for="?"> Check2 </label>
        </div>
        <div>
            <input type="checkbox" name="mycb" id="?" value="Check3">
            <label for="?"> Check3 </label>
        </div>
    </div>
</form>

I would appreciate any help.

Please provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of your attempt - so a proper answer can be provided — Always Helping, Sep 19 '20 at 12:42
`"disable some of them" `. is there a common attribute between those checkboxes? — AbbasEbadian, Sep 19 '20 at 12:50
there is no form? why do these boxes have no name? your code is too incomplete to answer it — Mister Jojo, Sep 19 '20 at 12:54
Surely there is a form but you would select all other checkboxes as well. Therefore I have entered the complete content of their values to select checkboxes I want to be preselected: `$("input[type='checkbox']").val(["Check1", "Check2", "Check3"])`. I'm trying to modify a code which is not written by me so I can not just give them any other ids. — RealJohnDoe, Sep 19 '20 at 13:04
Does this answer your question? [Setting "checked" for a checkbox with jQuery](https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery) — MathKimRobin, Sep 19 '20 at 13:18
again : **checkboxes names must be differents inside a same form**... where is your form ?, where is your div's) ?, you didn't show anything, how do we guess that ? — Mister Jojo, Sep 19 '20 at 13:32
@MisterJojo Thanks. As I said, I'm just modifying a for which is not coded by me. — RealJohnDoe, Sep 19 '20 at 14:10

Anup · Accepted Answer · 2020-09-19T15:58:47.667

1

let checkList = ['check1','check2'];

checkList.forEach(checkBox=>{
$(`input[value=${checkBox}]`).attr("checked", "checked")
$(`input[value=${checkBox}]`).attr("disabled", true)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id"123" value="check1">
<input type="checkbox" id"456" value="check2">
<input type="checkbox" id"789" value="check3">

edited Sep 19 '20 at 15:58

answered Sep 19 '20 at 13:21

Anup

589
4
8

Whats the issue ? – Anup Sep 19 '20 at 15:56
Got it working. Thanks! The spaces caused the problem! But now where we have the `name` attribute in common it is much easier. – RealJohnDoe Sep 19 '20 at 19:22

Mister Jojo · Answer 2 · 2020-09-19T13:29:29.953

0

you can do that

const myForm    = document.getElementById('my-form')
  ,   CheckList = [ 'Check2', 'Check4', 'Check5' ]
  ;
for (let ref of CheckList)
  {
  myForm[ref].checked = true
  }

<form action="" id="my-form">
  <label > <input type="checkbox" name="Check1" value="v1"> check 1 </label><br>
  <label > <input type="checkbox" name="Check2" value="v2"> check 2 </label><br>
  <label > <input type="checkbox" name="Check3" value="v3"> check 3 </label><br>
  <label > <input type="checkbox" name="Check4" value="v4"> check 4 </label><br>
  <label > <input type="checkbox" name="Check5" value="v5"> check 5 </label><br>
</form>

edited Sep 19 '20 at 13:29

answered Sep 19 '20 at 13:16

Mister Jojo

20,093
6
21
40

They have unfortunately the same `name` attribute. Don't ask me why and I can not change them. Maybe this is the reason why it is not working for me. – RealJohnDoe Sep 19 '20 at 14:22
@RealJohnDoe see https://validator.w3.org/#validate_by_input – Mister Jojo Sep 19 '20 at 14:44
Got it working. Thanks! The spaces caused the problem! But now where we have the `name` attribute in common it is much easier. – RealJohnDoe Sep 19 '20 at 19:25

How to preselect and disable specific checkboxes using js/jquery?

2 Answers2