javascript - 无法在单击事件中为输入添加边框颜色

Question

尝试更改 onClick 事件的边框颜色。

如果选中了一个特定的单选按钮，例如“其他”，并且用户尝试保存，我想将边框颜色更改为红色，让用户知道他们必须在输入中输入一个值。

$('#nextsales3Btn').on('click', function() {
  var ratestructure = $('input[name="ratestructure"]:checked').val();  // radio button
  var otherstructure = $('#otherratein').val();

  if(ratestructure == "Other" && otherstructure == "")
  {
    $('#otherratein').css('border', 'red');
    console.log('here');
    return false;
  }
  else
  {
    console.log('all good');
  }
});

以上逻辑有效。当选中单选按钮且输入为空时，我可以在控制台中看到“此处”，但我似乎无法更改输入的边框颜色。

我尝试使用以下方法无济于事:

$('#otherratein').css('border-color', 'red');

那里没有成功。

我怎样才能让它工作？

* 编辑 *

这是 HTML 的样子:

   <div class="form-row">
     <div class="col-md-12">
        <div class="form-group"> 
           <label id="ratestructureLabel">Required Rate Structure:</label>                                     
           <br/> 
           <div class="form-check"> 
           <input class="form-check-input" type="radio" name="ratestructure" id="allin" value="all-in"> 
           <label class="form-check-label" for="yesebiz">All-In</label>                                         
           </div>
           <div class="form-check"> 
           <input class="form-check-input" type="radio" name="ratestructure" id="allindest" value="all-inD"> 
           <label class="form-check-label" for="allindest">All-In, subject to Destinations</label>                                         
           </div>
           <div class="form-check"> 
           <input class="form-check-input" type="radio" name="ratestructure" id="allinori" value="all-inO"> 
           <label class="form-check-label" for="allinori">All-In, subject to Origins</label>                                         
           </div>
           <div class="form-check"> 
           <input class="form-check-input" type="radio" name="ratestructure" id="boforindest" value="bofOD"> 
           <label class="form-check-label" for="boforindest">BOF, subject to Origins & Destination</label>                                         
           </div>
           <div class="form-check"> 
           <input class="form-check-input" type="radio" name="ratestructure" id="pernote2" value="pernote2"> 
           <label class="form-check-label" for="pernote2">Per Note 2</label>                                         
           </div>
           <div class="form-check"> 
           <input class="form-check-input" type="radio" name="ratestructure" id="surcharges" value="surcharges"> 
           <label class="form-check-label" for="surcharges">Surcharges per tariff</label>                                         
           </div>
           <div class="form-check form-check-inline"> 
           <input class="form-check-input" type="radio" name="ratestructure" id="otherrate" value="Other Rate"> 
           <label class="form-check-label" for="otherrate">Other:</label>
           <input type="text" class="form-control ml-2" name="otherstructure" id="otherrateIn" placeholder=""> 
           </div>
         </div>
       </div>
     </div>

Answer 1

首先，

定义和用法 border 属性是以下属性的简写属性:

边框宽度 边框样式(必需) 边框颜色

所以:

 border: 5px solid red;

在 javascript:

$('#otherrate').css('border', '5px solid red');