CODEWITHSUNDEEP
d3.jscheckbox
Nikita Vlasenko
Nikita Vlasenko

Reputation: 4352

D3: select only unchecked checkboxes

It seems very easy but somehow I can not find anything on the matter neither on stackoverflow, nor by googling it. Basically I need to just select all unchecked checkboxes on the page with d3 and disable them. How to do that?

Upvotes: 3

Views: 648

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38161

You can select unchecked checkboxes with a css pseudo selector using d3.selectAll(), and then set the disabled property with selection.property("disabled",true);

var checkboxes = d3.selectAll("input[type='checkbox']:not(:checked)")
   .property("disabled",true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">

Though you should be able to use .attr("disabled",true) as well:

var checkboxes = d3.selectAll("input[type='checkbox']:not(:checked)")
   .attr("disabled",true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">

Upvotes: 4

Related Questions