CODEWITHSUNDEEP
javascriptjquery
dinotom
dinotom

Reputation: 5162

traversing dom elements for right jquery selector

Given the following html snippet, I cant seem to access the input elements under the div with class="input-group"

 <form action="login.html#register" method="post" id="form-register" class="form-horizontal display-none">
        <div class="form-group">
            <div class="col-xs-6">
                <div class="input-group">
                    <span class="input-group-addon"><i class="gi gi-user"></i></span>
                    <input type="text" id="register-firstname" name="register-firstname" class="form-control input-lg" placeholder="Firstname">
                </div>
           </div>
           <div class="col-xs-6">
               <input type="text" id="register-lastname" name="register-lastname" class="form-control input-lg" placeholder="Lastname">
           </div>
       </div>
       <div class="form-group">
           <div class="col-xs-12">
               <div class="input-group">
                   <span class="input-group-addon"><i class="gi gi-envelope"></i></span>
                   <input type="text" id="register-email" name="register-email" class="form-control input-lg" placeholder="Email">
               </div>
          </div>
     </div>
</form>

I have tried numerous selector syntax but nothing seems to work. I cannot figure out why this version doesn't work, it certainly should, but I'm no expert on JQuery just yet. To me the syntax below says get all the items with class form-group in the element with id form-register, then get all divs with class input-group and then all the input tags in those divs. Am I mistaken there?

 $('#form-register.form-group > div.input-group > input').attr('disabled', true);

The proper syntax is, via assistance from the accepted answer;

 $('#form-register div[class^="col-xs"] input').attr('disabled', true);

Upvotes: 0

Views: 43

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Your CSS syntax is incorrect. Try this:

$('#form-register .form-group div.input-group > input').attr('disabled', true);

Firstly, notice the space between the first two selectors, because .form-group is a child of #form-register. Secondly the > means 'direct child of', so was incorrect when used on div.input-group.

Upvotes: 2

Related Questions