2014-04-04 37 views
0

在這裏,我在我的 頁面使用相同的地址選項,當我在複選框同一地址點擊我的其他輸入必須禁用 我的代碼:當點擊chekbox按鈕,關閉所有的輸入類型值

<ul><input type="checkbox" name="same-address" /> Click for same address <br />Enter Address here: <input type="text" name="address" /> Enter City here: <input type="text" name="city" /> </ul> 

回答

1

試試這個

$('#same').click(function() { 
    if ($(this).is(':checked')) { 
     $(this).parents('ul').find('li input[type="text"],select').attr('disabled', 'disabled'); 
    } else { 
     $(this).parents('ul').find('li input[type="text"],select').removeAttr('disabled') 
    } 
}); 

DEMO Fiddle

1

你可以使用attribute equals selector按類型選擇輸入,並使用.prop更新您的inputdisabled狀態:

$('input[type="checkbox"]').click(function() { 
    $('input[type="text"]').prop('disabled',this.checked); 
}); 

Fiddle Demo

+0

我建議輸入控件的作用域。這將禁用頁面上的所有文本輸入。 –

+0

但我不想隱藏我的上邊輸入類型的地址 – Sam

+0

你能解釋在JS小提琴 – Sam

0

可以使用input selector用於選擇所有的輸入元件和結合使用Prop用於禁止控制。

$('input[type="checkbox"]').click(function() { 
     $('input[type="text"]').prop('disabled',this.checked); 
    }) 
0

請嘗試使用下面的代碼片段。

<!DOCTYPE html> 
<html> 
<head> 
<title>Test</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
     $('.SameAsBillingAddress').on('click',function(){ 

     if($(this).prop('checked')) 
     { 
      $('.Address2').prop('disabled', true); 
     } 
     else 
     { 
      $('.Address2').prop('disabled', false); 
     } 
     }); 

}); 

</script> 

</head> 
<body> 
<div> 
<ul> 
    <div style="height:30px; width:80%; margin-left:30px; clear:both;"> 
     <input name="" type="checkbox" value="" class="SameAsBillingAddress" />Same as Billing Address</div> 
    <li> 
     <label>House No.:</label> 
     <input type="text" name="house no" class="Address2" placeholder="House No" /> 
    </li> 
    <li> 
     <label>Street:</label> 
     <input type="text" name="street" class="Address2" placeholder="Your Street" /> 
    </li> 
    <li> 
     <label>City</label> 
     <input type="text" name="city" class="Address2" placeholder="Your City" /> 
    </li> 
    <li> 
     <label>Zip:</label> 
     <input type="text" name="zip" class="Address2" placeholder="Your Zip" /> 
    </li> 
    <li> 
     <label>Country:</label> 
     <select class="Address2"> 
      <option>India</option> 
     </select> 
    </li> 
    <li style="float:right;"> 
     <label></label> 
     <input type="submit" name="save" class="Address2" value="Save Details" /> 
    </li> 
</ul> 
</div> 

</body> 
</html>