如果选中单选框，则将所需的类添加到输入字段

Question

我正在尝试动态地将所需的类添加到输入字段 如果选中yes单选按钮，则应将required字段添加到输入字段。 如果选中no单选按钮，则应将disabled属性添加到该输入字段。
我做错了什么？

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.disabilityRadioBtn').load(function() {
    if ($('.disabilityRadioBtn input[name="disability"]:checked').val() == 'Yes') {
      $('#txtDisDet').addClass('required');
    } else {
      $('#txtDisDet').attr('disabled', true);
    }
  });
});

function send() {
  var ack = true;
  $('.required').each(function() {
    if ($(this).val == "") {
      alert("enter values");
      ack = false;
    }
  })
  if (ack) {
    alert("sent successfully");
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  <label>name</label>
  <input type="text" class="required">
</section>

<section class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  <label class="col-xs-12">Disability</label>
  <label class="col-xs-12"> <label class="disabilityRadioBtn "><input  class="required" type="radio" name="disability" id="chkDisYes" value="true">Yes<input class="required" type="radio" name="disability" id="chkDisNo" value="false"> No</label></label>
</section>
<section class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  <label class="col-xs-12">If Yes,Details</label>
  <label class="col-xs-12"><input  class="form-control" type="text" id="txtDisDet" placeholder="Disability Details"></label>
</section>
<button id="send" onclick="send()">send
 </button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

以下是您的工作代码。它缺少部分。

$(document).ready(function() {
  $('input:radio[name=disability]').click(function(){
    if($(this).val() == 'true') {
      $("#txtDisDet").addClass('required').removeAttr('disabled');
    } else {
      $("#txtDisDet").removeClass('required').attr('disabled', true);
    }
  })
});

function send() {
  var ack = true;
  $('.required').each(function() {
    if ($(this).val() == "") {
      alert("enter values");
      ack = false;
    }
  })
  if (ack) {
    alert("sent successfully");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  <label>name</label>
  <input type="text" class="required">
</section>

<section class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  <label class="col-xs-12">Disability</label>
  <label class="col-xs-12"> <label class="disabilityRadioBtn "><input  class="required" type="radio" name="disability" id="chkDisYes" value="true">Yes<input class="required" type="radio" name="disability" id="chkDisNo" value="false"> No</label></label>
</section>
<section class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  <label class="col-xs-12">If Yes,Details</label>
  <label class="col-xs-12"><input  class="form-control" type="text" id="txtDisDet" placeholder="Disability Details"></label>
</section>
<button id="send" onclick="send()">send
 </button>

Answer 2

我更新了您的代码并添加了一条小评论，以帮助您更好地理解。

关于我所做的事情的短篇小说：

1. 您需要更新“更改”事件的内容，而不是“加载”。基本上，当值发生变化时，您会执行某些操作，而不是在首次通过浏览器呈现复选框时。

2. 我做的第二件事是给你的复选框一个初始值。这是一个小的优化，因为你避免为这种情况编写额外的javascript。

$(document).ready(function() {
  // Update things when value change, not on load
  $('input[name="disability"]').on('change', function(){
    if ($(this).val() == 'true') {
      $('#txtDisDet').addClass('required');
      $('#txtDisDet').prop('disabled', false);
    } else {
      $('#txtDisDet').prop('disabled', true);
    }
  })
});

function send() {
  var ack = true;
  $('.required').each(function() {
    if ($(this).val == "") {
      alert("enter values");
      ack = false;
    }
  })
  if (ack) {
    alert("sent successfully");
  }
}

.required{
  border: 1px solid red;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  <label>name</label>
  <input type="text" class="required">
</section>

<section class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  <label class="col-xs-12">Disability</label>
  <label class="col-xs-12"> <label class="disabilityRadioBtn "><input  class="required" type="radio" name="disability" id="chkDisYes" value="true">Yes<input class="required" type="radio" name="disability" id="chkDisNo" value="false" checked>No</label></label>
</section>
<section class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  <label class="col-xs-12">If Yes,Details</label>
  <label class="col-xs-12"><input  class="form-control" type="text" id="txtDisDet" placeholder="Disability Details" disabled></label>
</section>
<button id="send" onclick="send()">send
 </button>

Answer 3

有很多事情要考虑。

1. 您正在加载HTML元素时执行该事件（至少您尝试过）。这样使用ready代替load。

2. 我认为你需要的是在电台改变上添加一个事件。

总的来说，这是一个代码片段调试，可以让您了解这些事件的执行情况。

＆＃13;
＆＃13;
$(document).ready(function() {
  //change event
  $('.disabilityRadioBtn input[name="disability"]').change(function() {
    if ($(this).val() == 'true') {
      console.log('changed to yes');
      $('#txtDisDet').addClass('required');
      $('#txtDisDet').attr('disabled', false);
    } else {
      console.log('changed to no');
      $('#txtDisDet').removeClass('required');
      $('#txtDisDet').attr('disabled', true);
    }
  });
  
  //ready event
  $('.disabilityRadioBtn').ready(function() {
    console.log('loaded but no value was selcted');
    if ($('.disabilityRadioBtn input[name="disability"]:checked').val() == 'true') {
      $('#txtDisDet').addClass('required');
      $('#txtDisDet').attr('disabled', false);
    } else {
      $('#txtDisDet').removeClass('required');
      $('#txtDisDet').attr('disabled', true);
    }
  });
});

function send() {
  var ack = true;
  $('.required').each(function() {
    if ($(this).val == "") {
      alert("enter values");
      ack = false;
    }
  })
  if (ack) {
    alert("sent successfully");
  }
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  <label>name</label>
  <input type="text" class="required">
</section>

<section class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  <label class="col-xs-12">Disability</label>
  <label class="col-xs-12"> <label class="disabilityRadioBtn "><input  class="required" type="radio" name="disability" id="chkDisYes" value="true">Yes<input class="required" type="radio" name="disability" id="chkDisNo" value="false"> No</label></label>
</section>
<section class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  <label class="col-xs-12">If Yes,Details</label>
  <label class="col-xs-12"><input  class="form-control" type="text" id="txtDisDet" placeholder="Disability Details"></label>
</section>
<button id="send" onclick="send()">send
 </button>
＆＃13;
＆＃13;
＆＃13;