Question

我希望下面的脚本能够与表单的不同部分中的各种或多个id一起使用，彼此独立地工作。

$(document).ready(function() {
$('#submit *').prop( "disabled", true );
$('#submit').css('color','#ccc');

$("input:radio[class^='yes-']").click(function() {
$('#submit *').prop( "disabled", false );
$('#submit *').css('color','#000');
});
$("input:radio[class^='no-']").click(function() {
$('#submit *').prop( "disabled", true );
$('#submit input').prop( "checked", false );
$('#submit textarea').prop( "value", "");
$('#submit *').css('color','#ccc');
});
});

https://jsfiddle.net/artboycat/dcpy5k6y/

Answer 1

只需编写一个带id的函数并在代码中使用该id。例如，

var foo = function(id){
    $('#' + id).css('color', '#000');
}

Answer 2

更改为使用类，然后对它们运行each()函数使用单选框，使用this，然后使用父选择器和子选择器来查找相应的元素。

JSFiddle：https://jsfiddle.net/dcfxzb5y/1/

JS：

$(document).ready(function() {


  $('.submit-field *').prop( "disabled", true );
  $('.submit-field ').css('color','#ccc');

  $("input:radio[class^='yes-']").click(function() {
      $(this).parent().children('.submit-field').children().prop( "disabled", false );
      $(this).parent().children('.submit-field').children().css('color','#000');
  });

  $("input:radio[class^='no-']").click(function() {
    $(this).parent().children('.submit-field').children().prop( "disabled", true );
    $(this).parent().children('.submit-field').children('input').prop( "checked", false );
    $(this).parent().children('.submit-field').children('textarea').prop( "value", "");
    $(this).parent().children('.submit-field').children().css('color','#ccc');
  });


});

HTML：

  <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
  <div class="grps" id="grps1">

   <input type="radio" name="1" class="yes-1" value=1>yes 
   <input type="radio" name="1" class="no-1" value=2>no

  <fieldset class="submit-field">
  <legend>Event Type*</legend>
  <ul>
  <li>Please check event type that best describes your event</li>
  <li>This form must be submitted two weeks prior to event date</li>
  </ul>


  <input type="radio" value="1" name="event-type-1" id="etype-1" class="input-float-left"><label for="etype-1" class="label-longer">&nbsp;Meeting</label>   
   <br>
  <input type="radio" value="2" name="event-type-2" id="etype-2" class="input-float-left"><label for="etype-2" class="label-longer">&nbsp;Seminar</label>  
  <br>
  <input type="radio" value="3" name="event-type-3" id="etype-3" class="input-float-left"><label for="etype-3" class="label-longer">&nbsp;Panel</label> 
   <br>
  <input type="radio" value="4" name="event-type-4" id="etype-4" class="input-float-left"><label for="etype-4" class="label-longer">&nbsp;Training</label>   
   <br>
  <input type="radio" value="5" name="event-type-5" id="etype-5" class="input-float-left"><label for="etype-5" class="label-longer">&nbsp;Symposium</label>  
  <br>




  <input type="radio" value="9" name="event-type-6" id="etype-9" class="input-float-left"><label for="etype-9" class="label-longer">&nbsp;Other</label>
  <div id="show-me"><TEXTAREA COLS="60" ROWS="4" name="other_item" id="etype-9" maxlength="80" size="25" class="input"></TEXTAREA></div>  

  </fieldset>
  </div>

   <BR clear="all">
  <br>


  <div>

   <input type="radio" name="1" class="yes-2" value=1>yes 
   <input type="radio" name="1" class="no-2" value=2>no

  <fieldset class="submit-field">
  <legend>Event Type*</legend>
  <ul>
  <li>Please check event type that best describes your event</li>
  <li>This form must be submitted two weeks prior to event date</li>
  </ul>


  <input type="radio" value="1" name="event-type-1" id="etype-1" class="input-float-left"><label for="etype-1" class="label-longer">&nbsp;Meeting</label>   
   <br>
  <input type="radio" value="2" name="event-type-2" id="etype-2" class="input-float-left"><label for="etype-2" class="label-longer">&nbsp;Seminar</label>  
  <br>
  <input type="radio" value="3" name="event-type-3" id="etype-3" class="input-float-left"><label for="etype-3" class="label-longer">&nbsp;Panel</label> 
   <br>
  <input type="radio" value="4" name="event-type-4" id="etype-4" class="input-float-left"><label for="etype-4" class="label-longer">&nbsp;Training</label>   
   <br>
  <input type="radio" value="5" name="event-type-5" id="etype-5" class="input-float-left"><label for="etype-5" class="label-longer">&nbsp;Symposium</label>  
  <br>




  <input type="radio" value="9" name="event-type-6" id="etype-9" class="input-float-left"><label for="etype-9" class="label-longer">&nbsp;Other</label>
  <div id="show-me"><TEXTAREA COLS="60" ROWS="4" name="other_item" id="etype-9" maxlength="80" size="25" class="input"></TEXTAREA></div>  

  </fieldset>
  </div>

Answer 3

如果我已正确理解，我已尝试解析您的查询。请检查以下内容。请检查HTML和JS代码中的修改。谢谢:)）

JSFiddle

<div class="grps" id="grps1">

 <input type="radio" name="1" class="yes-1" value=1>yes 
 <input type="radio" name="1" class="no-1" value=2>no

<fieldset class="one" id="submit1">
  <legend>Event Type*</legend>
   <ul>
     <li>Please check event type that best describes your event</li>
     <li>This form must be submitted two weeks prior to event date</li>
   </ul>


<input type="radio" value="1" name="event-type-1" id="etype-1" class="input-float-left"><label for="etype-1" class="label-longer">&nbsp;Meeting</label>   
 <br>
<input type="radio" value="2" name="event-type-2" id="etype-2" class="input-float-left"><label for="etype-2" class="label-longer">&nbsp;Seminar</label>  
<br>
<input type="radio" value="3" name="event-type-3" id="etype-3" class="input-float-left"><label for="etype-3" class="label-longer">&nbsp;Panel</label> 
 <br>
<input type="radio" value="4" name="event-type-4" id="etype-4" class="input-float-left"><label for="etype-4" class="label-longer">&nbsp;Training</label>   
 <br>
<input type="radio" value="5" name="event-type-5" id="etype-5" class="input-float-left"><label for="etype-5" class="label-longer">&nbsp;Symposium</label>  
<br>
<input type="radio" value="9" name="event-type-6" id="etype-9" class="input-float-left"><label for="etype-9" class="label-longer">&nbsp;Other</label>
<div id="show-me"><TEXTAREA COLS="60" ROWS="4" name="other_item" id="etype-9" maxlength="80" size="25" class="input"></TEXTAREA></div>  

</fieldset>
</div>

 <BR clear="all">
<br>


<div class="grps" id="grps2">

 <input type="radio" name="1" class="yes-2" value=1>yes 
 <input type="radio" name="1" class="no-2" value=2>no

<fieldset class="one" id="submit2">
<legend>Event Type*</legend>
<ul>
<li>Please check event type that best describes your event</li>
<li>This form must be submitted two weeks prior to event date</li>
</ul>


<input type="radio" value="1" name="event-type-1" id="etype-1" class="input-float-left"><label for="etype-1" class="label-longer">&nbsp;Meeting</label>   
 <br>
<input type="radio" value="2" name="event-type-2" id="etype-2" class="input-float-left"><label for="etype-2" class="label-longer">&nbsp;Seminar</label>  
<br>
<input type="radio" value="3" name="event-type-3" id="etype-3" class="input-float-left"><label for="etype-3" class="label-longer">&nbsp;Panel</label> 
 <br>
<input type="radio" value="4" name="event-type-4" id="etype-4" class="input-float-left"><label for="etype-4" class="label-longer">&nbsp;Training</label>   
 <br>
<input type="radio" value="5" name="event-type-5" id="etype-5" class="input-float-left"><label for="etype-5" class="label-longer">&nbsp;Symposium</label>  
<br>
<input type="radio" value="9" name="event-type-6" id="etype-9" class="input-float-left"><label for="etype-9" class="label-longer">&nbsp;Other</label>
<div id="show-me"><TEXTAREA COLS="60" ROWS="4" name="other_item" id="etype-9" maxlength="80" size="25" class="input"></TEXTAREA></div>  

</fieldset>
</div>

    $(document).ready(function() {
  $('#submit1 *').prop( "disabled", true );
  $('#submit1').css('color','#ccc');

  $("input:radio[class^='yes-']").click(function() {
    var no = $(this).parent().attr('id').slice(-1);
    $('#submit'+no+' *').prop( "disabled", false );
    $('#submit'+no+' *').css('color','#000');
  });
  $("input:radio[class^='no-']").click(function() {
    var no = $(this).parent().attr('id').slice(-1);
    $('#submit'+no+' *').prop( "disabled", true );
    $('#submit'+no+' input').prop( "checked", false );
    $('#submit'+no+' textarea').prop( "value", "");
    $('#submit'+no+' *').css('color','#ccc');
  });
});

如何将功能应用于网页上的多个ID？

3 个答案: