Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Jquery / Parent Child

Disable A Button In The First Child Div

Post a Comment
I've tried to create a simple application to swap divs on clicking the respective buttons. However, the first div which is the first-child of div.container should have 'left' and '

Solution 1:

So, I went through your logic and modified and changed some aspect of your code for the better. The attached code is an improved version of what you have posted.

I created a function handleEvents() which should handle all your disable button properties on resetting of the layout and when two divs are swapped. This method has to be basically called on the swapping of all divs to render the new disabled properties on the buttons.

The function looks like this:

functionhandleEvents() {
    $(".top, .left, .down, .right").prop("disabled", false);

    $(".container .box:first-child").find(".top, .left").prop("disabled", true);
    $(".container .box:nth-child(2)").find(".top, .right").prop("disabled", true);
    $(".container .box:nth-child(3)").find(".down, .left").prop("disabled", true);
    $(".container .box:nth-child(4)").find(".down, .right").prop("disabled", true);
  }

Check updated solution in this fiddle.

Refer the working solution here:

$(document).ready(function() {
  resetEvents();

  functionhandleEvents() {
    $(".top, .left, .down, .right").prop("disabled", false);

    $(".container .box:first-child").find(".top, .left").prop("disabled", true);
    $(".container .box:nth-child(2)").find(".top, .right").prop("disabled", true);
    $(".container .box:nth-child(3)").find(".down, .left").prop("disabled", true);
    $(".container .box:nth-child(4)").find(".down, .right").prop("disabled", true);
  }


  functionresetEvents() {

    $(".top, .left, .down, .right").unbind('click');

    handleEvents();

    $('.right').click(function() {
      var toMove1 = $(this).parents('.box');

      $(toMove1).insertAfter($(toMove1).next());
      handleEvents();
    });

    $('.left').click(function() {
      var toMove1 = $(this).parents('.box');

      $(toMove1).insertBefore($(toMove1).prev());
      handleEvents();
    });

    $('.down').click(function() {
      var toMove1 = $(this).parents('.box');
      var middle = $(toMove1).next();
      var toMove2 = $(middle).next();

      toMove2 = $(toMove1).insertAfter($(middle).next());

      var middle = $(toMove2).prev();
      middle = $(middle).insertBefore($(middle).prev());
      handleEvents();
    });

    $('.top').click(function() {
      var toMove1 = $(this).parents('.box');
      var middle = $(toMove1).prev();
      var toMove2 = $(middle).prev();

      toMove2 = $(toMove1).insertBefore($(middle).prev());

      var middle = $(toMove2).next();
      middle = $(middle).insertAfter($(middle).next());
      handleEvents();
    });
  }
});
.box {
  height: 25%;
  width: 45%;
  padding: 1%;
  margin-left: 1%;
  margin-top: 1%;
  border: 1px solid black;
  float: left;
}

.disabled-btn {
  cursor: not-allowed;
  opacity: 0.25%;
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><body><divclass="container"><divclass="box"id="one"><p>one</p><buttonclass="right">Swap with right!</button><buttonclass="left">Swap with left!</button><buttonclass="top">Swap with top!</button><buttonclass="down">Swap with down!</button></div><divclass="box"id="two"><p>two</p><buttonclass="right">Swap with right!</button><buttonclass="left">Swap with left!</button><buttonclass="top">Swap with top!</button><buttonclass="down">Swap with down!</button></div><divclass="box"id="three"><p>three</p><buttonclass="right">Swap with right!</button><buttonclass="left">Swap with left!</button><buttonclass="top">Swap with top!</button><buttonclass="down">Swap with down!</button></div><divclass="box"id="four"><p>four</p><buttonclass="right">Swap with right!</button><buttonclass="left">Swap with left!</button><buttonclass="top">Swap with top!</button><buttonclass="down">Swap with down!</button></div></div></body>

Solution 2:

First we will configure all buttons as per your requirements.

  • (top left), disable top and left
  • (top right), disable top and right
  • (bottom left), disable down and left
  • (bottom right), disable down and right

full jsfiddle here

Code

functionresetButtons() {
  // enable all buttons
    $("button").prop("disabled", false);

  // First box (top left), disable top and leftvar firstBox = $(".box").eq(0);
  firstBox.find(".top").prop("disabled", true)
  firstBox.find(".left").prop("disabled", true);

  // Second box (top right), disable top and rightvar secondBox = $(".box").eq(1);
  secondBox.find(".top").prop("disabled", true)
  secondBox.find(".right").prop("disabled", true);

  // Third box (bottom left), disable down and leftvar thirdBox = $(".box").eq(2);
  thirdBox.find(".down").prop("disabled", true)
  thirdBox.find(".left").prop("disabled", true);

  // Fourth box (bottom right), disable down and rightvar fourthBox = $(".box").eq(3);
  fourthBox.find(".down").prop("disabled", true)
  fourthBox.find(".right").prop("disabled", true);
}

For swapping, we will play with array-index of the boxes and swap the html content of each box.

functionswapContent(divA, divB) {
  var tempDiv = divA.html();
  divA.html(divB.html());
  divB.html(tempDiv);
}

For example, right button will swap current box and the one next to it (on its right).

$(".container").on("click", ".right", function(e) {
  var currentBox = $(this).parents('.box');
  var currentIndex = $(".box").index(currentBox);
  console.log(currentIndex, "right", currentBox);

  swapContent(
    currentBox,
    $(".box").eq(currentIndex+1)
  );

  resetButtons();
});

Post a Comment for "Disable A Button In The First Child Div"