2017-03-11 8 views
0

divの中に異なるIDを持つ別のフォームがあります。私がしていることは、それぞれのdivを無効にするためにラジオボタンを使用していることです。jqueryからdivのIDに関して入力を無効にすることはできません

私のコードはここで働いていませんが、私は

$(document).ready(function() { 
 
    $('.address_type').change(function() { 
 
    if (this.value == '0') { 
 
     var id = $(this).attr('id'); 
 
     $("#add_0_" + id).find("input[class='secondary']").prop("disabled", false); 
 
    } else { 
 
     $("#add_0_" + id).find("input[class='secondary']").prop("disabled", true); 
 
    } 
 
    }); 
 
});
<form action="/ali_store/order/place" method="POST"> 
 
    <div class="collapse in" id="ali_store"> 
 
    <div class="panel-body"> 
 
     <input type="hidden" name="_token" value="CJDqNipNtpNavJ9m1fogtUyCThJe2GCS75bI6KJ2"> 
 
    </div> 
 
    <hr /> 
 
    <div class="panel-body"> 
 
     Address Information 
 
     <div class="row"> 
 
     <div class="col-lg-6"> 
 
      <input type="radio" name="add_type" class="address_type" id="ali_store" value="1" checked />&nbsp;Use This Address 
 
      
 
      <div id="add_1_ali_store"> 
 
      <br /> asd 
 
      <br /> asd, 
 
      <br /> xcv 
 
      <br /> sdf 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-6"> 
 
      <input type="radio" name="add_type" class="address_type" id="ali_store" value="0" />&nbsp;Use This Address 
 
      <div id="add_0_ali_store"> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">House no.</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_hno" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">Street</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_street" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">Area</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_area" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">City</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_city" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">State</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_state" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">Postal Code</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_postal" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">Phone</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_phone" class="secondary form-control" /> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">Mobile</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_mobile" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel-footer"> 
 
     <div> 
 
     TOTAL: <strong>Rs. 186,145.00 /-</strong> 
 
     </div> 
 
     <input type="submit" formtarget="_blank" class="btn btn-primary" value="Place Order" /> 
 
    </div> 
 
    </div> 
 
</form> 
 

 
<form action="/ali2/order/place" method="POST"> 
 
    <div class="collapse in" id="ali2"> 
 
    <div class="panel-body"> 
 
     <input type="hidden" name="_token" value="CJDqNipNtpNavJ9m1fogtUyCThJe2GCS75bI6KJ2"> 
 

 
    </div> 
 
    <hr /> 
 
    <div class="panel-body"> 
 
     Address Information 
 
     <div class="row"> 
 
     <div class="col-lg-6"> 
 
      <input type="radio" name="add_type" class="address_type" id="ali2" value="1" checked />&nbsp;Use This Address 
 

 
      <div id="add_1_ali2"> 
 
      <br /> asd 
 
      <br /> asd 
 
      <br /> asd 
 
      <br /> asd 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-6"> 
 
      <input type="radio" name="add_type" class="address_type" id="ali2" value="0" />&nbsp;Use This Address 
 
      <div id="add_0_ali2"> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">House no.</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_hno" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">Street</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_street" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">Area</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_area" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">City</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_city" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">State</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_state" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">Postal Code</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_postal" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">Phone</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_phone" class="secondary form-control" /> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">Mobile</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_mobile" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel-footer"> 
 
     <div> 
 
     TOTAL: <strong>Rs. 1,331.00 /-</strong> 
 
     </div> 
 
     <input type="submit" formtarget="_blank" class="btn btn-primary" value="Place Order" /> 
 
    </div> 
 
    </div> 
 
</form> 
 

 
<form action="/ali3/order/place" method="POST"> 
 
    <div class="collapse in" id="ali3"> 
 
    <div class="panel-body"> 
 
     <input type="hidden" name="_token" value="CJDqNipNtpNavJ9m1fogtUyCThJe2GCS75bI6KJ2"> 
 

 
    </div> 
 
    <hr /> 
 
    <div class="panel-body"> 
 
     Address Information 
 
     <div class="row"> 
 
     <div class="col-lg-6"> 
 
      <input type="radio" name="add_type" class="address_type" id="ali3" value="1" checked />&nbsp;Use This Address 
 
    
 
      <div id="add_1_ali3"> 
 
      <br /> dsa 
 
      <br /> dsa 
 
      <br /> dsa 
 
      <br /> dsa 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-6"> 
 
      <input type="radio" name="add_type" class="address_type" id="ali3" value="0" />&nbsp;Use This Address 
 
      <div id="add_0_ali3"> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">House no.</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_hno" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">Street</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_street" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">Area</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_area" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">City</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_city" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">State</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_state" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">Postal Code</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_postal" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">Phone</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_phone" class="secondary form-control" /> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="col-lg-4">Mobile</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" name="address_secondary_mobile" class="secondary form-control" required/> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel-footer"> 
 
     <div> 
 
     TOTAL: <strong>Rs. 1,500.00 /-</strong> 
 
     </div> 
 
     <input type="submit" formtarget="_blank" class="btn btn-primary" value="Place Order" /> 
 
    </div> 
 
    </div> 
 
</form>

を試みたものです私はラジオボタンを変更した場合、それは価値があることを望む「0」その入力フィールドが無効になり得ますそれ以外は有効です。

答えて

0

あなたは)

$(document).ready(function() { 
    $('.address_type').change(function() { 
if (this.value == '0') { 
    var id = $(this).attr('id'); 
    $("#add_0_" + id).find("input.secondary").prop("disabled", false); 
} else { 
    $("#add_0_" + id).find("input.secondary").prop("disabled", true); 
} 

}のようなコードを書くことができます。 });

関連する問題