根據複選框更改文本顏色

Question

我試圖在單擊複選框時將文本「我已閱讀並同意....」更改爲不同的顏色。是否需要將DIV &標籤放在文字&複選框中？

我也注意到複選框將移動到下一行，當我在div類= 「複選框」 &標籤放置

<p style="color: red; font-weight: bold;">I have read and agree to the terms and conditions 
<input type="checkbox" id="termsChkbx " onchange="isChecked(this,'sub1')"/></p> 

<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p> 

JS

function isChecked(checkbox, sub1) { 
    var button = document.getElementById(sub1); 

    if (checkbox.checked === true) { 
     button.disabled = ""; 
    } else { 
     button.disabled = "disabled"; 
    } 
} 



$(document).ready(function(){ 
    $('#termsChkbx').change(function(){ 
     if($(this).is(':checked')) 
     { 
      $(this).parent('p').css('color','black'); 
     } 
     else 
     { 
      $(this).parent('p').css('color','red') 
     } 

    }); 
}); 

Answer 1

嘗試，

$(document).ready(function(){ 
 
    $('#termsChkbx').change(function(){ 
 
     if($(this).is(':checked')) 
 
     { 
 
      $(this).parent().css('color','black'); 
 
     } 
 
     else 
 
     { 
 
      $(this).parent().css('color','red') 
 
     } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p style="color: red; font-weight: bold;">I have read and agree to the terms and conditions 
 
      <input type="checkbox" id="termsChkbx" onchange="isChecked(this,'sub1')"/></p>