تفعيل وإبطال عناصر input بعد النقر على عناصر radio باستخدام DOM Traversal

محمد المصري12 · 24 سبتمبر 2021

عندي زرين radio كل واحد فيهم مسئول عن تعطيل و تمكين مربع النص الخاص به

و يعمل ممتاز و كل ما سبق تحت مظلة بند النوع الاول

مشكلتي في التكرار

لما بجي بكرر ما سبق و اسميه النوع التاني و محتاج بيان تاني خالص

بيانات النوع الاول بتتغير

فيديو قصير توضيحي للمشكلة

2021-09-24_15-59-47.mp4

الكود يمكن تجربته مباشرة على السيرفر الشخصي

test.php

<HTML>
<HEAD>
    <TITLE> Text Demo </TITLE>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://gtms.areyada.com/main.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</HEAD>

<BODY>
<div class="form-row threads-fields mt-4 mb-3 cl">

<!-- الصف الأول -->
<div class="col-12 size30">النوع الاول</div>
<div class="col-6">

<label >سعر المتر الطولي</label>

<div class="input-group">

<label class="container mt-0">

<input type="radio" class="moth" checked value="one" name="moth">

<span class="checkmark"></span>

</label>

</div>

</div>

<div class="col-6 ">

<label>سعر الكيلو</label>

<div class="input-group">

<label class="container mt-0">

<input type="radio" class="moth" value="two" name="moth">

<span class="checkmark"></span>

</label>

</div>

</div>

<!-- سعر المتر الطولي -->

<div class="col-6 one">

<label class="required m"> سعر المتر الطولي <i class="fa fa-question-circle text-info size15"></i></label>

<div class="input-group">

<div class="input-group-prepend">

<span class="input-group-text" id="inputGroupPrepend"><i class="fa fa-th"></i></span>

</div>


<input id= "mPrice" type="number" class="form-control mPrice" required name="mPrice" value="0">


<div class="invalid-feedback">

يرجى تحديد

</div>

</div>

</div>
<!-- سعر الكيلو -->
<div class="col-6 two">

<label class="required k"> سعر الكيلو <i class="fa fa-question-circle text-info size15"></i></label>

<div class="input-group">

<div class="input-group-prepend">

<span class="input-group-text" id="inputGroupPrepend"><i class="fa fa-th"></i></span>

</div>


<input id= "mPrice" type="number" class="form-control kPrice" required name="mPrice" value="0" disabled>


<div class="invalid-feedback">

يرجى تحديد

</div>

</div>

</div>



<div class="col-12 size30">النوع الثاني</div>
<div class="col-6">

<label >سعر المتر الطولي</label>

<div class="input-group">

<label class="container mt-0">

<input type="radio" class="moth" checked value="one" name="moth">

<span class="checkmark"></span>

</label>

</div>

</div>

<div class="col-6 ">

<label>سعر الكيلو</label>

<div class="input-group">

<label class="container mt-0">

<input type="radio" class="moth" value="two" name="moth">

<span class="checkmark"></span>

</label>

</div>

</div>

<div class="col-6 one">

<label class="required m"> سعر المتر الطولي <i class="fa fa-question-circle text-info size15"></i></label>

<div class="input-group">

<div class="input-group-prepend">

<span class="input-group-text" id="inputGroupPrepend"><i class="fa fa-th"></i></span>

</div>


<input id= "mPrice" type="number" class="form-control mPrice" required name="mPrice" value="0">


<div class="invalid-feedback">

يرجى تحديد

</div>

</div>

</div>
<!-- سعر الكيلو -->
<div class="col-6 two">

<label class="required k"> سعر الكيلو <i class="fa fa-question-circle text-info size15"></i></label>

<div class="input-group">

<div class="input-group-prepend">

<span class="input-group-text" id="inputGroupPrepend"><i class="fa fa-th"></i></span>

</div>


<input id= "mPrice" type="number" class="form-control kPrice" required name="mPrice" value="0" disabled>


<div class="invalid-feedback">

يرجى تحديد

</div>

</div>

</div>


</div>

</BODY>

</HTML>

<script>
        $(document).on('change', '.moth', function() {
            var moth = $(this).val();
            var mainContEl = $(this).parents('div.threads-fields');
            var mPrice = (mainContEl).children().find("input.mPrice");
            //var mPrice =  $(".mPrice");
           // var kPrice =  $(".kPrice");
            var kPrice = (mainContEl).children().find("input.kPrice");


if (moth == "two") {  // when select price for KG


    (mPrice).attr("disabled","disabled");  // disable meter price input

    (mPrice).removeAttr("required");

   (kPrice).removeAttr("disabled"); // enable kg price checkbox

//$(".height-thread").removeAttr("disabled");

} else {


  (kPrice).attr("disabled","disabled");

  (kPrice).removeAttr("required");

   (mPrice).removeAttr("disabled");


//$(".height-thread").attr("disabled","disabled");

}

});
</script>

انتظر ارائكم

تم التعديل في 24 سبتمبر 2021 بواسطة Wael Aljamal
إرفاق الشيفرة من الملف + توضيح السؤال

Wael Aljamal · 24 سبتمبر 2021

بتاريخ 2 ساعات قال محمد المصري5:

كلام ممتاز في حال لو هما النوعين ( سطرين فقط ) اللي عندي

لكن ممكن المستخدم يحدد اكتر من 5 او 6 سطور ( من خلال jquery ، بشكل متغير مش ثابت ، فالحل ده مش هايكون فعال معايا

* إن radio ترسل للمخدم قيمة واحدة فقط، وهي العنصر المختار من مجموعته (المجموعة هي كل input radio لها نفس قيمة name)، فتكرار نفس القيمة للخاصية name سوف تعمل على إرسال قيمة واحدة للمخدم من كل ما تم تحديده، (لن تستطيع تحديد إلا خانة واحدة ومن عدة منتجات)

لاحظ الهيكلية المناسبة لعنصر واحد فقط

<div>
  <input type="radio" name="radio1" value="text1"/>
  <input type="text" disabled/>

  <br/><br/>

  <input type="radio" name="radio1" value="text2"/>  
  <input type="text" disabled/>
</div>

<br/><br/><br/><br/>

<div>
  <input type="radio" name="radio2" value="text1"/>
  <input type="text" disabled/>

  <br/><br/>

  <input type="radio" name="radio2" value="text2"/>  
  <input type="text" disabled/>
</div>

عنصر radio يليه عنصر input وهذا كله نضعه في div ونكرره، مع تغيير قيمة name لكل مجموعة مستقلة، يمكنك توليدها ديناميكيا أو كما تشاء.

ثم شيفرة جيكويري،

$('input[type=radio]').on('click', function(){            
    $(this).next().prop('disabled',false)
		   .siblings('input[type=text]').prop('disabled',true);
});

بعد الضغط على عنصر radio ننظر للعنصر التالي والذي سيكون بالضرورة input ونجعل له خاصية disabled false ليتم تفعيله، ثم ننتقل لإخوته (التي تكون لها نفس الأب "div" على سبيل المثال، والتي من نوع input وتقوم بإلغاء تفعيله

Wael Aljamal · 24 سبتمبر 2021

لديك 4 أزرار من نوع radio كل اثنين منها لنوع معين، وتريد حساب كلفة النوع إما من خلال الكيلو غرام أو عدد الأمتار.

كل نوع " كل سطر" يجب أن يحوي قيمة مختلفة للخاصية name للعنصر radio أي أول عنصرين لهم اسم مثلا moth1، وثاني عنصرين لهم اسم مختلف مثلا moth2 لكي تستطيع تحديد وحدة القياس لكل نوع (مجموعة أزرار radio تقبل قيمة وحدة - خيار واحد - للمجموعة المشتركة بنفس قيمة الخاصية name)
في نفس السطر "عنصرين لنفس النوع" تريد تحديد واحدة قياس فقط وإبطال الأخرى، اعمل بنفس الفكرة السابقة، اربط قيمة اختيار radio مع تفعيل input الموافق له، مثلا تعطي value تحدد فيها رقم هذا العنصر وتفعيل من نفس الفكرة عنصر input الموافق

محمد المصري12 · 24 سبتمبر 2021

بتاريخ منذ ساعة مضت قال Wael Aljamal:

لديك 4 أزرار من نوع radio كل اثنين منها لنوع معين، وتريد حساب كلفة النوع إما من خلال الكيلو غرام أو عدد الأمتار.

كل نوع " كل سطر" يجب أن يحوي قيمة مختلفة للخاصية name للعنصر radio أي أول عنصرين لهم اسم مثلا moth1، وثاني عنصرين لهم اسم مختلف مثلا moth2 لكي تستطيع تحديد وحدة القياس لكل نوع (مجموعة أزرار radio تقبل قيمة وحدة - خيار واحد - للمجموعة المشتركة بنفس قيمة الخاصية name)

في نفس السطر "عنصرين لنفس النوع" تريد تحديد واحدة قياس فقط وإبطال الأخرى، اعمل بنفس الفكرة السابقة، اربط قيمة اختيار radio مع تفعيل input الموافق له، مثلا تعطي value تحدد فيها رقم هذا العنصر وتفعيل من نفس الفكرة عنصر input الموافق

كلام ممتاز في حال لو هما النوعين ( سطرين فقط ) اللي عندي

لكن ممكن المستخدم يحدد اكتر من 5 او 6 سطور ( من خلال jquery ، بشكل متغير مش ثابت ، فالحل ده مش هايكون فعال معايا

تم التعديل في 24 سبتمبر 2021 بواسطة محمد المصري5

Wael Aljamal · 24 سبتمبر 2021

بتاريخ 2 ساعات قال محمد المصري5:

كلام ممتاز في حال لو هما النوعين ( سطرين فقط ) اللي عندي

لكن ممكن المستخدم يحدد اكتر من 5 او 6 سطور ( من خلال jquery ، بشكل متغير مش ثابت ، فالحل ده مش هايكون فعال معايا

أعتقد ان طريقة توزيع العناصر لديك وهيكلية HTML تزيد صعوبة الامر، ساحاول إيجاد هيكلية ديناميكية أفضل

محمد المصري12 · 24 سبتمبر 2021

لو مفيهاش اضاعة لوقتك ممكن توضيح الحل على المثال المرفق لاني تهت ( الفكرة مش واصلاني خالص )

و شاكر تعبك جدا

Wael Aljamal · 24 سبتمبر 2021

بتاريخ 1 دقيقة مضت قال محمد المصري5:

لو مفيهاش اضاعة لوقتك ممكن توضيح الحل على المثال المرفق لاني تهت ( الفكرة مش واصلاني خالص )

و شاكر تعبك جدا

انسخ الشيفرات وجربهم لديك في المتصفح،

المثال فيه 4 حقول إدخال تتبع لمنتجين، كل اثنين RADIO يتبعان لمنتج ومسؤولين عن تفعيل و إبطال INPUT

تفعيل وإبطال عناصر input بعد النقر على عناصر radio باستخدام DOM Traversal

السؤال

محمد المصري12

6 أجوبة على هذا السؤال

Recommended Posts

Wael Aljamal

Wael Aljamal

محمد المصري12

Wael Aljamal

محمد المصري12

Wael Aljamal

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية