Question

当我单击（Button1）元素时，我试图更改（Field1）元素的属性。我想在单击按钮时将INPUT字段设置为DISABLED和HIDDEN，但是在使用JQUERY遍历DOM时遇到问题。我的HTML示例结构在父/子方面是正确的。任何帮助将不胜感激。

<div  class="container">

  <label for="check">Coffee Check <span class="form-required" title="This field is required.">*</span></label>

    <div id="check" class="form-radios webform switch_comment">

      <div class="form-type-radio form-item radio">

         <!-- ******(Button1) click this radio button (Button1)****** --> 
         <input required="required" class="webform switch_comment form-radio" type="radio" id="coffee-check-1" name="submitted[coffee_check]" value="3" checked="checked" /> 
         <!-- ******************************* -->

         <label for="edit-submitted-standards-product-quality-coffee-check-1">Yes </label> 

     </div>

     <div class="form-type-radio form-item-submitted-standards-product-quality-coffee-check form-item radio">

       <input required="required" class="webform switch_comment form-radio" type="radio" id="coffee-check-2" name="submitted[coffee_check]" value="0" />  
       <label for="edit-submitted-standards-product-quality-coffee-check-2">No </label>

    </div>

 </div>

 <div class="description">Is there evidence of daily checks, 2nd check at 11am being completed if +50 cups per day</div>

</div>

<div  class="form-item webform-component webform-component-textfield "> 
<label for="edit-submitted-standards-product-quality-comments-coffee-check">Comments (Coffee Check) <span class="form-required" title="This field is required.">*</span></label>

<!-- *****(Field1) change properties of this input (Field1)******-->
<input required="required" class="webform switch_comment form-control form-text required" type="text" id="comments-coffee-check" name="submitted[comments_coffee_check]" value="" disabled="disabled" style="display: none;"/>
 <!-- ******************************* -->

 </div>

///////////////////////////////////

JQuery的

// Fire when radio button is clicked
    $('input:radio').click(function(){

        // check which radio is clicked based on value.
        if($(this).val() === '0'){

          // hide bootstrap button if radio is NO
              $(this).parent().parent().parent().next(".AddComment").fadeOut("slow");

 /// Hide field

        }else{

          // show bootstrap button if radio is YES
          $(this).parent().parent().parent().next(".AddComment").fadeIn("slow");

  /// Show field

        }

    });

Answer 1

由于ID 必须是唯一的，并且您引用的两个元素都有ID，因此您可以直接单击BUTTON1元素时定位FIELD1元素：

$('#coffee-check-1').click(function(){
    $('#comments-coffee-check').hide().prop('disabled',true)
})

不需要DOM遍历。

更新：

根据您的评论，以下内容将起作用：

$('input.webform.switch_comment.form-radio').click(function(){
    $('this').closest('div.container').next('div.form-item.webform-component.webform-component-textfield').find('input.webform.switch_comment.form-control.form-text.required').hide().prop('disabled',true)
})

我将元素上的类用作选择器的一部分，但是您也可以使用name属性。例如，您可以使用$('input.webform.switch_comment.form-radio')代替$('input[name="submitted\\[coffee_check\\]"]')，而不是display: inline-block;。有关特殊字符以及如何逃避它们的注意事项，请参阅https://api.jquery.com/category/selectors/。

JQuery遍历DOM。嵌套的父/子

1 个答案: