2016-06-08 108 views
0

我有以下代碼。是否有一種智能的方法可以在切換單選按鈕之後禁用文本框並清除其值?單選按鈕之間切換後禁用文本框

<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); 
}); 
+0

那你嘗試添加此功能? – RRK

+0

我添加了上面的代碼。 – Omri

+0

@Omri嗨,請查看Rejith R Krishnan編輯的答案!乾杯。 :) – MrBuggy

回答

2

試試這個。第二個radio位於標籤內。所以siblings是不夠的。獲取父母div並使用find訪問input

$('.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>

+1

並用於清除表單控件: $(「。form-control」)。val(「」); - 清除值 $(「。form-control」)。removeAttr(「placeholder」);清除佔位符 – MrBuggy

+0

@MrBuggy我清理了一下答案,並添加了你的條件。 – RRK

+0

這是完美的,謝謝隊友!乾杯:) – MrBuggy

0

你可以到你的js文件

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

那麼的onclick調用它的情況下()

onclick="javascript:Disable()"