D3: select only unchecked checkboxes

Question

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?

Answer 1

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">