How can I use some jQuery id with less line?

Question

I search to reduce the size of this type of jQuery content with 24 ids:

if (currValue >= 3) /* These are my 24 ids */
{
    document.getElementById("skillbutton1").disabled  = true;
    document.getElementById("skillbutton2").disabled  = true;
    document.getElementById("skillbutton3").disabled  = true;
    document.getElementById("skillbutton4").disabled  = true;
    document.getElementById("skillbutton5").disabled  = true;
    document.getElementById("skillbutton6").disabled  = true;
    document.getElementById("skillbutton7").disabled  = true;
    document.getElementById("skillbutton8").disabled  = true;
    document.getElementById("skillbutton9").disabled  = true;
    document.getElementById("skillbutton10").disabled = true;
    document.getElementById("skillbutton11").disabled = true;
    document.getElementById("skillbutton12").disabled = true;
    document.getElementById("skillbutton13").disabled = true;
    document.getElementById("skillbutton14").disabled = true;
    document.getElementById("skillbutton15").disabled = true;
    document.getElementById("skillbutton15").disabled = true;
    document.getElementById("skillbutton16").disabled = true;
    document.getElementById("skillbutton17").disabled = true;
    document.getElementById("skillbutton18").disabled = true;
    document.getElementById("skillbutton19").disabled = true;
    document.getElementById("skillbutton20").disabled = true;
    document.getElementById("skillbutton21").disabled = true;
    document.getElementById("skillbutton22").disabled = true;
    document.getElementById("skillbutton23").disabled = true;
    document.getElementById("skillbutton24").disabled = true;
}

`$('[id^="skillbutton"]').prop('disabled', true);`. – Teemu Apr 15 '20 at 12:43 — Teemu, Apr 15 '20 at 12:43
Or use a `class` – Niet the Dark Absol Apr 15 '20 at 12:44 — Niet the Dark Absol, Apr 15 '20 at 12:44

score 3 · Accepted Answer · answered Apr 15 '20 at 12:47

3

Put the same class on every one of those elements and loop through them:

document.querySelectorAll('.skillbutton').forEach(el => el.disabled = true);

Or the same thing in jQuery:

$('.skillbutton').prop('disabled', true);

answered Apr 15 '20 at 12:47

Rory McCrossan

331,213
40
305
339

score 1 · Answer 2 · answered Apr 15 '20 at 12:45

To get all the elements starting with "skillbutton" you should use:

$("[id^=skillbutton]")

To get those that end with "skillbutton"

$("[id$=skillbutton]")

Or use a common class as one comment mentions:

<button id="skillbutton1" class="skillBtn">Btn</button>
$(".skillBtn")

See this related question for context

How can I use some jQuery id with less line?

2 Answers2