Question

我有以下代码。在单选按钮之间切换后，是否有一种智能方法可以禁用文本框并清除其值？

<div class="checkbox">
 <label style="margin-bottom:10px">Number of...:</label>
  <div class="input-group" style="margin-bottom:10px">
       <input class="radio" name="2" type="radio" checked="checked" id="numOfRadio" style="display:block;float:left">
       <input class="form-control" name="numOf" type="number" placeholder="1000" value="1000" id="numOf" style="width:140px"  />
       <label for="radio_2" style="font-weight:400"><input type="radio" name="2" id="radioAll" style="margin-left" />All</label>
  </div>      
</div>

我尝试使用以下代码，但它没有帮助：

$('.radio').on('click', function() {
    $('.radio')
        .siblings()
        .prop('disabled', true);

    $(this)
        .siblings()
        .prop('disabled', false);
});

Answer 1

试试这个。第二个radio位于标签内。所以siblings还不够。获取父div，然后使用input来find。{/ p>

$('.radio').on('change', function() {
  var val = this.id == 'radioAll' ? '' : 1000;
  $(this)
    .closest('div').find('input[type="number"]')
    .prop('disabled', this.id == 'radioAll')
    .val(val).attr("placeholder",val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="checkbox">
  <label style="margin-bottom:10px;">Number of...:</label>
  <div class="input-group" style="margin-bottom:10px">
    <input class="radio" name="2" type="radio" checked="checked" id="numOfRadio" style="display:block;float:left">
    <input class="form-control" name="numOf" type="number" placeholder="1000" value="1000" id="numOf" style="width:140px" />
    <label for="radioAll" style="font-weight:400">
      <input class="radio" type="radio" name="2" id="radioAll" style="margin-left" />All
    </label>
  </div>
</div>

Answer 2

您可以将此功能添加到.js文件

function Disable() {
    var elem = document.getElementById('numOf');
    elem.disabled = true;
    elem.value="";
}

然后在onclick（）

的情况下调用它

onclick="javascript:Disable()"

在单选按钮之间切换后禁用文本框

2 个答案: