0

チェックボックスsec_dept_time_leaveがチェックされているときはいつでも、ラベルと段落タグに「required」というクラスを追加したいと思います。

チェックされていない場合は、ラベルと段落タグの「必須」クラスを削除します。

これが私のjqueryです：

$('#sec_dept_time_leave').on("click", function() {
  if ($(this).is(":checked")) {
     $('label#hr_dept_time_orgn1').addClass("required");
  }
  else {
    $('label#hr_dept_time_orgn1').removeClass("required"); 
  }
});

HTML:

<div class="row singlecheck">
    <label for="sec_dept_time_leave">Department Time/Leave Entry</label>
    <input value="Department time" type="checkbox" 
     name="sec_dept_time_leave" id="sec_dept_time_leave" />
</div>

<div class="row">
   <label for="hr_dept_time_orgn1">ORGN 1</label> 
   <input type="text" name="hr_dept_time_orgn1" id="hr_dept_time_orgn1" />
</div>  
<p> This is required text </p>
<ul>
  <li><label for="hr_dept_time">Time</label><input value="Dept Time" type="radio"          name="hr_dept_time_leave" id="hr_dept_time" /></li>
  <li><label for="hr_dept_leave">Leave</label><input value="Dept Leave" type="radio" name="hr_dept_time_leave" id="hr_dept_leave" /></li>
  <li><label for="hr_dept_both">Both</label><input value="Both Dept Time and Leave" type="radio" name="hr_dept_time_leave" id="hr_dept_both" /></li>
</ul>

チェックされたときの最終結果としてこれが欲しい

<div class="row required">
   <label for="hr_dept_time_orgn1">ORGN 1</label> 
   <input type="text" name="hr_dept_time_orgn1" id="hr_dept_time_orgn1" />
</div> 
<p> This is required text<span class="required">*</span></p>

チェックしてからチェックを外したときの最終結果としてこれが欲しい

<div class="row">
   <label for="hr_dept_time_orgn1">ORGN 1</label> 
   <input type="text" name="hr_dept_time_orgn1" id="hr_dept_time_orgn1" />
</div> 
<p> This is required text</p>
<ul>
  <li><label for="hr_dept_time">Time</label><input value="Dept Time" type="radio"   name="hr_dept_time_leave" id="hr_dept_time" /></li>
  <li><label for="hr_dept_leave">Leave</label><input value="Dept Leave" type="radio" name="hr_dept_time_leave" id="hr_dept_leave" /></li>
  <li><label for="hr_dept_both">Both</label><input value="Both Dept Time and Leave" type="radio" name="hr_dept_time_leave" id="hr_dept_both" /></li>
</ul>

ありがとうございました

4

3 に答える 3

1

このコードで試してください：

HTML:

<p id="show"> This is required text<span class="required">*</span> </p>

JS:

$("p .required").hide();
$('#sec_dept_time_leave').change(function(){
  if ($(this).is(":checked")) {
     $("p .required").show();
  }
  else {
   $("p .required").hide(); 
  }
});

働くフィドル

于 2013-09-06T04:28:47.477 に答える
1

このようにしてください、私はその結果を得ました。

<script type="text/javascript"> 
$('#sec_dept_time_leave').on("click", function() {
if ($('#sec_dept_time_leave').is(":checked")) {
 $('#hr_dept_time_orgn2').addClass('required');
}
else {
 $('#hr_dept_time_orgn2').removeClass("required"); 
}
}); 
</script>
<div class="row">
 <label for="hr_dept_time_orgn1">ORGN 1</label> 
 <input type="text" name="hr_dept_time_orgn2" id="hr_dept_time_orgn2" />

</div>
于 2013-09-06T04:49:50.273 に答える
1

試す

$('#sec_dept_time_leave').on("click", function () {
    var $next = $('#hr_dept_time_orgn1');
    var $row = $next.closest('.row').toggleClass('required', this.checked);
    if (this.checked) {
        $row.next().append('<span class="required">*</span>')
    } else {
        $row.next().find('.required').remove()
    }
});
于 2013-09-06T04:28:15.927 に答える