freeCodeCamp/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/disable-an-element-using-jquery.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
bad87fee1348bd9aed808826	تعطيل عنصر باستخدام jQuery	6	17563	disable-an-element-using-jquery

--description--

يمكنك أيضًا تغيير الخصائص non-CSS لعناصر HTML باستخدام jQuery. على سبيل المثال، يمكنك تعطيل الأزرار.

عندما تعطيل الزر، فإنه سيصبح رماديًا ولا يمكن النقر عليه بعد الآن.

jQuery لديه وظيفة تسمى .prop() تسمح لك بضبط خصائص العناصر.

إليك كيف يمكنك تعطيل جميع الأزرار:

$("button").prop("disabled", true);

تعطيل زر target1 فقط.

--hints--

يجب تعطيل زر target1 الخاص بك.

assert(
  $('#target1') &&
    $('#target1').prop('disabled') &&
    code.match(/["']disabled["'],( true|true)/g)
);

لا يجب تعطيل أي أزرار أخرى.

assert($('#target2') && !$('#target2').prop('disabled'));

يجب عليك استخدام jQuery فقط لإضافة هذه الفئات إلى العنصر.

assert(!code.match(/disabled[^<]*>/g));

--seed--

--seed-contents--

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");

  });
</script>

<!-- Only change code above this line -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

--solutions--

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);

  });
</script>

<!-- Only change code above this line -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>