亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 jquery 通過單選啟用/禁用輸入

使用 jquery 通過單選啟用/禁用輸入

大話西游666 2022-07-21 09:52:55
帶有單選按鈕的表單。如果選中“Existing”,將啟用“existingnumber”輸入。它在選擇過程中工作正常,但在加載時不起作用。加載時,輸入“existingnumber”保持禁用狀態,即使它已“選中”。這在提交表單時會出現問題,并且錯誤驗證失敗。我已經嘗試在最后附加 .change() ,并創建一個我在準備好的文檔上調用的函數,但這沒有用。我想我錯過了一些東西。也許我需要先獲得價值?我有點jquery noob。<input type="radio" name="officephone" value="New" id="officephonenew" ><label for="officephonenew">New</label><br><input type="radio" name="officephone" value="Existing" id="officephoneexisting" checked><label for="officephoneexisting">Existing</label><br><input type="text" name="existingnumber" placeholder="555-555-1234" /><br><input type="radio" name="officephone" value="No" id="officephoneno"><label for="officephoneno">Not required</label>$('input:radio[name="officephone"]').change(function(){    $('input[name="existingnumber"]').prop("disabled",true);    if($(this).attr('value') == 'Existing') {        $('input[name="existingnumber"]').prop("disabled", false);    }});https://jsfiddle.net/Cormang/sd8xaj9h/10/
查看完整描述

1 回答

?
冉冉說

TA貢獻1877條經驗 獲得超1個贊

為了使這項工作在負載上簡單地使用filter()來檢索選中的單選按鈕和它上面trigger()的change事件。


另請注意,您可以通過將條件的布爾輸出提供給disabled屬性并使用val().


$('input:radio[name="officephone"]').change(function() {

  $('input[name="existingnumber"]').prop("disabled", $(this).val() != 'Existing');

}).filter(':checked').trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="radio" name="officephone" value="New" id="officephonenew" />

<label for="officephonenew">New</label><br />


<input type="radio" name="officephone" value="Existing" id="officephoneexisting" checked />

<label for="officephoneexisting">Existing</label><br />

<input type="text" name="existingnumber" placeholder="555-555-1234" disabled /><br />


<input type="radio" name="officephone" value="No" id="officephoneno" />

<label for="officephoneno">Not required</label>


查看完整回答
反對 回復 2022-07-21
  • 1 回答
  • 0 關注
  • 96 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號