选中复选框时禁用单选按钮组jquery

Question

大家好，我在这里得到了我的代码，我认为这是正确的，应该可以正常工作，但它没有。我有一个单选按钮组和一个复选框。每个单选按钮都有一个值，它将用作金额，复选框仅用于启用允许用户输入他们想要的金额的文本框。我通过检查是否首先检查了文本框来启用文本框。我想禁用收音机启用复选框时的组。 这是我的页面实际外观的屏幕截图

这是我的html

     <label class="radio-inline" style="margin-left:15%;" >
                            <input type="radio" id="amount_suggest_1" name="montantdon" value="50 000" onFocus="this.blur()"  >
                         50 000</label>
    <label class="radio-inline"><input type="radio" id="amount_suggest_2" name="montantdon" value="25 000" onfocus="this.blur()" >25 000</label>
    <label class="radio-inline"><input type="radio" id="amount_suggest_3" name="montantdon" value="10000" onfocus="this.blur()" >10 000</label>
    <label class="radio-inline"><input type="radio" id="amount_suggest_4" name="montantdon" value="5000" onfocus="this.blur()" >5000</label>
    <label class="radio-inline lastradio"><input type="radio" id="amount_suggest_5" name="montantdon" value="1000" onfocus="this.blur()"  checked>1 000</label>

                        <div class="row" style="padding-left:20px;">
                            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-5" style="width:200px;width:200px;margin:auto;margin-top:2%;">
                                <div class="input-group input-group-amount" >
                                <label class=""><input type="checkbox" name="autresdon" id="autresdon" />&nbsp;Autres</label>
                                    <div style="display:inline-block;vertical-align:top;"><input type="text" style="width:50px;" name="amountentered" id="amountentered" disabled /></div>
                                    <div style="display:inline-block;vertical-align:top;">
                                  <div class="input-group-btn" style="position:relative;">
                                      <button type="button" class="btn btn-default btn-lg dropdown-toggle currency-current" data-toggle="dropdown"><span class="currency" id="currency">EUR-€</span> <span class="caret"></span></button>

这是我的 jquery 代码

          $('#autresdon').click(function(){//on click the checkbox
      if($('#autresdon').is(':checked'))
                {
                $('#amountentered').prop("disabled",false);//enables textbox
                }
                else
                {
                $('#amountentered').prop("disabled",true);//on unset checkbox disable textbox
                }
      });

      //disabling radio group by using their class as selector
             $('.montantdon ').click(function(){
             if($('#autresdon').is(':checked'))
             {
                $('#autresdon').prop("checked",false);
                }
      });

我不想同时发布数据（收音机的值和手动输入的金额）。我该如何解决这个问题？谢谢

Answer 1

如果我正确理解了这个问题，我会建议：

// binds the change-handler:
$('#autresdon').change(function(){
    // sets the 'disabled' property to false (if the 'this' is checked, true if not):
    $('.radio-inline').prop('disabled', !this.checked);
// triggers the change event (so the disabled property is set on page-load:
}).change();

顺便说一句，使用 JavaScript（以及 尤其是 jQuery 中的，在其中它变得完全没有必要）远离内嵌/突兀的 JavaScript。使用onFocus/onfocus、onchange、onclick 等会导致维护噩梦，并创建一些非常糟糕的（而且，再次，不必要地）不整洁 HTML。

参考资料：

• change()。
• prop()。