Counting the number of disabled DIVs

Question

I am working on this example here. What I have is, say, two sections (div id="sec1" and "sec2"), each of which contains divs (div id="Q+id"). Using radio control, user disables either section 1 or section 2, thus disabling all contained divs and their controls. I would like to count number of DISABLED divs (id="Q+id") and figure out HOW MANY DIVs remain ENABLED.

First, I counted ALL available DIVs with (id="Q+id") and feed the result into field "ALL"

 $(function () 
    {
   var counter = $("[id^=Q]").filter(function ()
    {
    return this.id.match(/Q\d+/); 
    }).length;
    $("input[name=ALL]").val(counter);
});

Now I need to somehow get disabled DIVs and then something like ("ALL"-"DIS"="LEFT").

PS. One more question. When I am testing the above example locally, I am using

$("#sec1").toggle(this.checked).prop("disabled", true);

to disable section and surely it works fine. However, in JSFiddle I have to use

$("#sec1 :input").toggle(this.checked).prop("disabled", true);

adding up ":input" to get the same effect. Why? Thanks in advance!

UPDATE: Corresponding HTML

<body>
<div class="Response">
    <label><input type="radio" name="Radio" value="1" id="t4201">4201</label>
    <label><input type="radio" name="Radio" value="2" id="t4202">4202</label>
</div>

<div class="figures">
    <div id="Template_Questions">
        <label for="number1">Number of ALL items:</label>
        <input class="counter" type="number" name="ALL" id="number1">
    </div>
    <div id="Disabled_Questions">
        <label for="number2">Number of disabled items:</label>
        <input class="counter" type="number" name="DIS" id="number2">
    </div>
    <div id="Left_Questions">
        <label for="number3">Number of left items: (ALL-DIS)</label>
        <input class="counter" type="number" name="LEFT" id="number3">
    </div>
    <div id="Responded_Questions">
        <label for="number4">Number of RESPONDED items:</label>
        <input class="counter" type="number" name="RESP" id="number4">
    </div>
</div>

<div id="sec1"> <!--Three Qs -->
    <div class="A" id="Q01">
        <h4>Title 1</h4>
        <p>Some Content</p>
            <div class="Response">
                <label><input type="radio" name="Radio1" value="Y" id="R1Y">Yes</label>
                <label><input type="radio" name="Radio1" value="N" id="R1N">No</label>
            </div>
            <div class="Observation">
                <label for="Obs1">Notes:</label><br>
                <textarea name="observation" id="Obs1"></textarea>
            </div>
    </div>
    <div class="B" id="Q02">
        <h4>Title 2</h4>
        <p>Some Content</p>
            <div class="Response">
                <label><input type="radio" name="Radio2" value="Y" id="R2Y">Yes</label>
                <label><input type="radio" name="Radio2" value="N" id="R2N">No</label>
            </div>
            <div class="Observation">
                <label for="Obs2">Notes:</label><br>
                <textarea name="observation" id="Obs2"></textarea>
            </div>
    </div>
    <div class="B" id="Q03">
        <h4>Title 3</h4>
        <p>Some Content</p>
        <div class="Response">
            <label><input type="radio" name="Radio3" value="Y" id="R3Y">Yes</label>
            <label><input type="radio" name="Radio3" value="N" id="R3N">No</label>
        </div>
        <div class="Observation">
            <label for="Obs3">Notes:</label><br>
            <textarea name="observation" id="Obs3"></textarea>
        </div>
    </div>
</div> <!--End of sec1 -->

<div id="sec2"> <!--Two Qs -->
    <div class="B" id="Q04">
        <h4>Title 4</h4>
        <p>Some Content</p>
        <div class="Response">
            <label><input type="radio" name="Radio4" value="Y" id="R4Y">Yes</label>
            <label><input type="radio" name="Radio4" value="N" id="R4N">No</label>
        </div>
        <div class="Observation">
            <label for="Obs4">Notes:</label><br>
            <textarea name="observation" id="Obs4"></textarea>
        </div>
    </div>
    <div class="B" id="Q05">
        <h4>Title 5</h4>
        <p>Some Content</p>
        <div class="Response">
            <label><input type="radio" name="Radio4" value="Y" id="R5Y">Yes</label>
            <label><input type="radio" name="Radio4" value="N" id="R5N">No</label>
        </div>
        <div class="Observation">
            <label for="Obs5">Notes:</label><br>
            <textarea name="observation" id="Obs5"></textarea>
        </div>
    </div>
</div> <!--End of sec2 -->

Note that [the `disabled` attribute](http://www.w3.org/TR/html5/forms.html#attr-fe-disabled) is **only** relevant to form fields. A `div` does not have the `disabled` attribute, nor the reflected property for it. — T.J. Crowder, Mar 09 '14 at 12:07
@T.J.Crowder by disabled div OP means the input disabled in div — Tushar Gupta - curioustushar, Mar 09 '14 at 12:08
@TusharGupta: From the end of the question, I suspect that may not be true. We'd have to know what `#sec1` is (hence my first comment). — T.J. Crowder, Mar 09 '14 at 12:09
@T.J. Crowder - html could be bulky, I was hoping to optimise the question ... — AlexShevyakov, Mar 09 '14 at 12:10

Tushar Gupta - curioustushar · Accepted Answer · 2014-03-09T12:16:24.270

1

Try

$("[id^=Q]:has(input[disabled])").length; //get length of disabled div's(having input disabled in it)

edited Mar 09 '14 at 12:16

answered Mar 09 '14 at 12:07

Tushar Gupta - curioustushar

58,085
24
103
107

Aren't you targeting the (disabled) input elements with this? – tewathia Mar 09 '14 at 12:13
@tewathia yes i am targeting input elements. because `by disabled div OP means the input disabled in div ` – Tushar Gupta - curioustushar Mar 09 '14 at 12:15
2

@T.J.Crowder He's written "//get length of disabled div's(having input disabled in it)" in the answer, which is wrong. The code will get the count of all disabled input tags inside div tags, and not the div tags containing disabled input tags. – tewathia Mar 09 '14 at 12:15
@tewathia: That's quite true. – T.J. Crowder Mar 09 '14 at 12:16
@Tushar Gupta - I am targeting the entire DIV with id="Q+id". In the example above ALL=5, DIS shall be either 3 or 2 depending on radio button and thus LEFT should be either 2 or 3. If you targeting inputs - the result is going to be wrong. – AlexShevyakov Mar 09 '14 at 12:18
@Tushar Gupta - Thanks for the help. How do I find the difference between these two values (ALL-DIS)? var counter3 = (counter) - (counter1);? – AlexShevyakov Mar 09 '14 at 13:10

score 1 · Answer 2 · answered Mar 09 '14 at 12:10

1

Try the has method:

$("[id^=Q]").filter(function (){
    return this.id.match(/Q\d+/); 
}).has(':disabled').length;

answered Mar 09 '14 at 12:10

tewathia

6,890
3
22
27

In my example here [http://jsfiddle.net/PatrickObrian/UPEZV/] on the first click, the value in the DISABLED field is 0 and only updates on subsequent clicks. How to make show the right number on the FIRST click. – AlexShevyakov Mar 09 '14 at 13:40
1

@Alexander That's because the `input[type=radio]` change event is being fired before the `#t420x` click event. http://jsfiddle.net/tewathia/UPEZV/6/ – tewathia Mar 09 '14 at 14:19
In that example you helped me with, (A-B), if I want to go with variable, say "var counter3 = counter-couter2", how would I go about? – AlexShevyakov Mar 09 '14 at 20:13

Counting the number of disabled DIVs

2 Answers2